Shulou(Shulou.com)06/02 Report--

This article mainly introduces JS how to achieve simple snow special effects, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Preface

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 you can use the image I uploaded to my website address: http://haiyong.site/wp-content/uploads/2021/12/snow.png opening picture, the content depends on JS.

Main implementation code HTML code

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

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. But I think the snow is pretty good, so it doesn't melt, like this.

Thank you for reading this article carefully. I hope the article "how to achieve simple Snow effects in JS" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.