Let the snowflakes on your blog exceed the screen and still be visible

Let the snowflakes on your blog exceed the screen and still be visible_jquery

WBOY

Release： 2016-05-16 17:44:26

Original

1042 people have browsed it

A few days ago, I saw the article that made your blog snowflakes in the garden, so I quickly put it on my blog to see the effect. Needless to say, it is really beautiful. But after looking at it for a while, I found that the page became particularly stuck.

After looking at the code, I found that the original author kept inserting multiple small div snowflakes into the body to slowly float downward. After floating to the bottom of the body, the snowflakes were removed.

But, in fact, we can’t see the page beyond the screen, so what’s the point even if there are snowflakes floating.
So, I slightly modified the original code so that it only fell from the top of the screen to the bottom of the screen (not the bottom of the body), then removed the snowflake, and changed the snowflake to fixed positioning.

Refreshed the page and it was much better. Now post the modified code to share with everyone.
PS. I couldn’t find the link to the original author. The copyright belongs to the original author:)

Copy the code The code is as follows:

(function($){ 
$.fn.snow=function(options){ 
var $flake=$('') 
.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'}); 