A few days ago, in the garden to see your blog Snow flower articles, hurriedly get their own blog to see the effect, don't say, is really beautiful ah. But after watching for a while, I found the page became a special card.
After looking at the code found that the original author is in the body constantly inserting a number of small div snowflakes to slowly drift downward, has been drifting to the bottom of the body, the snowflakes removed.
But, in fact, the page beyond the screen we can not see, even if there is snow in the drift and what is the significance of it.
So, the original code slightly modified, so that he just from the top of the screen to fall to the bottom of the screen (not the body of the bottom), will remove snowflakes, and then change the snow to fixed positioning.
Refreshing the page, it's much better. Now the revision code posted out to share with you.
PS. Original author Link I didn't find it, copyright belongs to original author all:)
Copy Code code as follows:
(function ($) {
$.fn.snow=function (options) {
var $flake =$ (' <div/> ')
. css ({
' Position ': ' fixed ',//' absolute ',
' Top ': ' -50px ',
' Z-index ': ' 1000 '
})
. html (' ❄ ');
var documentheight=document.documentelement.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=documentheight*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 '});