The original author keeps inserting multiple small div snowflakes in the body to slowly float down. after drifting to the bottom of the body, the snowflake is removed. Therefore, the original code is slightly modified, let him just fall from the top of the screen to the bottom of the screen (not the bottom of the body), then remove the snowflake, and change the snowflake to fixed to locate the previous day, when I saw an article in the garden that float your blog with snow, I quickly got my blog to see the effect. Don't say it's pretty. But after reading it for a while, we found that the page became special.
After reading the code, I found that the original author kept inserting multiple small p snowflakes in the body and slowly floated down. after drifting down to the bottom of the body, I removed the snowflake.
However, in fact, we can't see any page that goes beyond the screen, even if the snow is floating, what is the significance.
Therefore, after slightly modifying the original code, let him just fall from the top of the screen to the bottom of the screen (not the bottom of the body), remove the snowflake, and change the snowflake to fixed.
It is much better to refresh the page. Now I want to share with you the modified Code.
PS. The original author's link is not found, and the copyright belongs to the original author :)
The Code is as follows:
(Function ($ ){
$. Fn. snow = function (options ){
Var $ flake = $ ('
')
. Css ({
'Position': 'fixed', // 'absolute ',
'Top': '-50px ',
'Z-Index': '123'
})
. Html ('❄');
Var incluentheight#document.doc umentElement. clientHeight; // $ (document). height ();
Var documentWidth = $ (document). width ();
Var defaults = {minSize: 10, maxSize: 20, newOn: 500, flakeColor: "# FFFFFF "};
Var options = $. extend ({}, defaults, options );
Var interval = setInterval (function (){
Var startPositionLeft = Math. random () * documentWidth-100;
Var startOpacity = 0.5 + Math. random ();
Var sizeFlake = options. minSize + Math. random () * options. maxSize;
Var endPositionTop = documentHeight-40;
Var endPositionLeft = startPositionLeft-100 + Math. random () * 200;
Var durationFall = incluentheight * 10 + Math. random () * 5000;
$ Flake. clone ()
. AppendTo ('body ')
. Css ({
Left: startPositionLeft,
Opacity: startOpacity,
'Font-size': sizeFlake,
Color: options. flakeColor
})
. Animate ({
Top: endPositionTop,
Left: endPositionLeft,
Opacity: 0.2
},
DurationFall,
'Linear ',
Function (){
$ (This). remove ();
});
}, Options. newOn); // interval End
}; // $. Fn. snow End
}) (JQuery );
$. Fn. snow ({minSize: 10, maxSize: 60, newOn: 800, flakeColor: '# ccc '});
