Detailed explanation of simple snow effect example using JS

Preface
Main implementation code

HTML Code
JS code

Preface

Many friends in the south may have rarely seen or never seen snow. Today I will bring you a small demo to simulate the snow scene. First, let's take a look at the running effect

You can click to see it running online http://haiyong.site/xiaxue

First, let’s take a look at the project structure, a snowflake image, an .html file and jquery-1.4.2.js

I have put the snowflake picture used here, or you can directly use the picture address I uploaded to my website: http://haiyong.site/wp-content/uploads/2021/12/snow.png. Start with a picture, and the content depends entirely on JS.

Main implementation code

HTML Code

Here is the content in html, nothing

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Sea embraces 🌊 | Snow falls one by one</title>
		<meta name="viewport" content="width=device-width,user-scalable=no">
		<meta name="keywords" content="Snow flakes" />
		<meta name="description" content="Tools | Snow one by one; determined to create a website with 100 small games. Made by Haiyong, technical support - Haiyong" /> 
		<meta name="author" content="海拥(http://haiyong.site/moyu)" />
		<meta name="copyright" content="海拥(http://haiyong.site/moyu)" />
		<link rel="icon" href="http://haiyong.site/wp-content/uploads/2021/07/cropped-59255587-1-192x192.jpg" rel="external nofollow" sizes="192x192" />
		<style type="text/css">
			body{
				background-color: #000000;
				margin: 0;/* Remove the built-in margin*/
			}
			img{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<script src="js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>		
	</body>
</html>

JS code

First, turn on the timer to add a snowflake image. Here, <img src='images/snow.png'> can be changed to <img src='http://haiyong.site/wp-content/uploads/2021/12/snow.png'>

setInterval(function(){
var img = $("<img src='images/snow.png'>");
$("body").append(img);

Here the size of the snowflake is set to 10-20px. The following formula represents (0-10 + 10)px

var size = parseInt(Math.random()*11)+10;
img.css("width",size+"px");

Get screen width

var w = $(window).width();

The value range should be 0-screen width-snowflake width

var left =parseInt(Math.random()*(w-size));

Give the random 1eft obtained to the picture

img.css("left",left+"px");

Add the animation of snowflake movement, and get the distance of snowflake movement = screen height - snowflake size

var top = $(window).height()-size;

The code in the comments below is used to clear the cache and can be added or not.

img.animate({"top":top+"px"},size*100)
/* .fadeOut(1000,function(){
	//Execute this code when the animation is complete to clear the cache img.remove();
	//console.log($("img").length);
}); */
},10)

Uncomment this and you will see the falling snow disappear, as shown below.

If you like to see snow accumulation, you can comment it out, and the preview effect will be like this:

At this point, the effect we want to achieve is complete. If the running time is too long, it may cause excessive memory usage and cause lag. You can uncomment the content in the last comment in the HTML code, so that the snow below will slowly fade out and be removed. However, I think the snow is also very beautiful, so I didn't let it melt, like this

This is the end of this article about the detailed explanation of the simple snow effect example implemented in JS. For more relevant JS simple snow effect content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Example code for implementing snow effects with JavaScript
js special effects, a small example of snow on the page
Detailed explanation of three commonly used web effects in JavaScript
Native JS to achieve image marquee effects
Native JS to achieve blinds special effects
Native JS to achieve book flipping effects

<<: Very practical MySQL function comprehensive summary detailed example analysis tutorial

>>: What are inline elements and block elements?

MySQL 5.7.18 installation and configuration tutorial under Windows

Detailed explanation of simple snow effect example using JS

Table of contents

Preface

Main implementation code

HTML Code

JS code

MySQL 5.7.18 installation and configuration tutorial under Windows

The simplest MySQL data backup and restore tutorial in history (Part 1) (Part 35)

Share 8 CSS tools to improve web design

Vue implements simple data two-way binding

Detailed explanation of Vue3.0 + TypeScript + Vite first experience

A few things about favicon.ico (it’s best to put it in the root directory)

10 SQL statement optimization techniques to improve MYSQL query efficiency

Summary and examples of vue3 component communication methods

Introduction to MySQL statement comments

Recommend

Detailed explanation of Linux lsof command usage

How to implement web page compression in Nginx optimization service

Vue implements tab label (label exceeds automatic scrolling)

Detailed explanation of new relational database features in MySQL 8.0

Vue implements start time and end time range query

Detailed explanation of the case of Vue child component calling parent component method

Detailed explanation of the default values of width and height in CSS: auto and %

Manual and scheduled backup steps for MySQL database

Three methods to modify the hostname of Centos7

Analysis of several reasons why Iframe should be used less

HTML table cross-row and cross-column operations (rowspan, colspan)

The docker container directly runs to obtain the public IP operation through ping

Mysql dynamically updates the database script example explanation

Pure CSS to change the color of the picture