How to realize snowflake fluttering in HTML+CSS+JS

Editor to share with you HTML+CSS+JS how to achieve snowflake fluttering, I hope you will have something to gain after reading this article, let's discuss it together!

Many southern friends may not have seen much or never seen snow. Today I bring you a little Demo to simulate the snow scene. First of all, let's take a look at the running effect.

First, take a look at the project structure, a snowflake picture, an .html file and jquery-1.4.2.js

I put the snowflake picture I used here, or I can directly use the picture address: https://img.php.cn/upload/article/000/000/024/61dea8bfbe598211.png opening a picture, the content all depends on JS.

HTML code

Here's what's in html. There's nothing there.

Sea holds | A piece of snow body {background-color: # 00000; margin: 0 / * remove the outer margin * /} img {position: absolute;} JS code:

First, start the timer to add snowflake pictures, here

It can be changed to

SetInterval (function () {var img = $("

); $("body") .append (img)

Here, set the size of the snowflake to 10-20px, and the following formula represents (0-10 + 10) px

Var size = parseInt (Math.random () * 11) + 10terimg.css ("width", size+ "px")

Get the 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 to the picture.

Img.css ("left", left+ "px")

Add the animation of snowflake movement to 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, with or without addition.

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

Uncomment and you will see that the falling snow disappears, as shown in the following figure.

You can comment it out if you like watching the snow, and the preview effect looks like this.

At this point, the effect we want to achieve is complete. If the running time is too long, it may take up too much memory to cause stutter. You can uncomment the content in the last comment in the html code, so that the snow will slowly fade out and the remove will be deleted. However, I think the snow is pretty good, so it doesn't melt like this:

After reading this article, I believe you have a certain understanding of "how to achieve snowflakes in HTML+CSS+JS". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!