Use javascript to achieve the effect of falling snowflakes_javascript skills

After reading the example of the effect of pictures floating down in the collection of JavaScript web special effects examples, I think it is worth learning.

Change the picture into a snowflake picture to achieve the effect of snowflakes falling.

Also, some of the content is relatively outdated, so let’s change it.

Includes:

1. The operations on left and top only support IE browser. For this to work, chrome must be supported.
2. The process of controlling the whereabouts of the picture requires retrieving the element. If not, then change it to array storage and directly operate the objects stored in the array. It will not start faster.
3. Add elements to the document directly by creating element objects through JS code.

Implementation ideas:

1. Initialize and generate 10 divs, all of which use absolute positioning. Put a snowflake image in each div, set the width and height, and save it in an array, so that the subsequent snow function can be directly operated.
2. Initialize the abscissa and ordinate of each div. Always give the snowflakes a starting position for falling.
3. Initialize each snowflake to have a vertical falling step and a horizontal swinging step, so that each snowflake will fall and swing at different speeds.
4. Make a snow function and adjust the function every 10 seconds. Each time you adjust the function, it controls each snowflake to fall vertically by its own step length. The horizontal swing is calculated by a sine value using the sine function and then multiplied by Amplitude, so that the snowflakes fall in a sinusoidal waveform.

You can find pictures online.

The following code is compatible with IE8 and Chrome.

Copy code The code is as follows:

The above is all the code, the effect is quite good, please see the comments for specific explanation, there will be no more nonsense here, I hope it can be helpful to everyone.