JS Snowflakes falling special effects __js

JS Snowflakes Falling effect

1. Overview

With the development of front-end technology, the Web page of the special effects are gradually enriched, the page beautiful degree has been greatly improved, today I would like to share a JS snowflakes falling special effect of the realization of the way, especially for New Year's Day, Christmas, New Year and other festive atmosphere.

2. The effect chart is as follows:

3. Main function

To support the random falling of snowflakes,

Support for excessive animation,

Supports the rotation of snowflakes,

Slow reduction in support for transparency,

Support for the fall of the completed snowflakes are removed, greatly reducing the burden of the browser.

4. How to Achieve

I write here is a full screen of snowflakes falling effects, so first define a container, set a height of 100%,overflow:hidden, and then the JS code to achieve the specific operation.

First, a global Container node object and an array are defined to store the newly random img node.

The second step is to set up a timer that is used to randomly produce snowflakes, I'm using the way to create an IMG node to create a snowflake, create one and put it in an array, and of course there are other ways to set the animation time of each snowflake, set the style of snowflakes, randomly out of the initial position of snowflakes, end position and rotation angle , the additional attributes of the IMG node are set to store the randomly generated values, which are easy to invoke below. The code is as follows:

Turn on the timer and produce snowflakes

SetInterval (function () {

var img=document.createelement ("img");

Img.src= "Img/xue.gif";

Div.appendchild (IMG);

Array.push (IMG);

img.style.position= "Absolute";

img.style.top= "0px";

Img.style.webkittransition= "All 10s";

Random Snowflake size

var imgwidth=parseint (Math.random () *10000000)%14+12;

Img.width=imgwidth;

Random Snowflake position

var left=parseint (Math.random () *10000000)% (screen.availwidth-imgwidth);

img.style.left=left+ "px";

Random Snowflake End Position

var leftdown=parseint (Math.random () *10000000)% (screen.availwidth-imgwidth);

var topdown=screen.availheight+parseint (Math.random () *10000000)% (100);

Random Snowflake Angle

var deg=parseint (Math.random () *10000000)%360+360;

Custom two properties are used to store random end positions

Img.setattribute ("Leftdown", Leftdown);

Img.setattribute ("Topdown", Topdown);

Img.setattribute ("deg", deg);

},40);

The third step, and then set a timer, constantly cycle all the snowflakes, set the end of each snowflake and rotation angle, if it has been set, from the array to remove it, so as to avoid the browser load too large. The code is as follows:

SetInterval (function () {

settimeout (function () {

Downanimation ();

},1);

},50);

}

/***

* Snow Drop animation effects

*/

function Downanimation () {

Cycle all the snowflakes, change the landing position of each snowflake

for (Var i=0;i<array.length;i++) {

var snow=array[i];

Delete that will be processed

Array.splice (i,1);

Verify that the endpoint state is already set

if (parseint (snow.style.top)) {

Continue

}

To get the Snowflake's inborn termination status.

var leftdown=snow.getattribute ("Leftdown");

var topdown=snow.getattribute ("Topdown");

var deg=snow.getattribute ("deg");

Re-change left and top

snow.style.left=leftdown+ "px";

snow.style.top=topdown+ "px";

Change the angle of the snowflakes again

snow.style.transform= "Rotate (" +deg+ "deg)";

Change transparency

snow.style.opacity=0;

}

}

The fourth step, and then set a timer, every second to determine the newly created IMG in the snowflake picture, whether it has exceeded the screen size, if the snow distance from the top of the screen more than the available height, the IMG node will be deleted. Also to reduce the burden of the browser.

So far, snowflakes falling effects of the function has been basically completed, and simple to use, and because of the space problem, first to share here, we can continue to improve their own code. Follow-up will also have more to share with you, please look forward to.