블로그의 눈송이가 화면을 넘어서도 계속 보이도록 하세요_jquery

며칠 전 정원에 당신의 블로그에 눈꽃이 핀다는 글을 보고 효과를 보려고 얼른 블로그에 올렸습니다. 말할 것도 없이 정말 아름답습니다. 그런데 잠시 살펴보니 페이지가 유난히 멈춘 것 같았습니다.

코드를 살펴보니 원저자가 몸체에 작은 div 눈송이를 여러 개 계속 삽입하여 천천히 아래쪽으로 떠다니는 것을 발견했습니다.

그런데 사실 우리는 화면 너머 페이지를 볼 수 없으니 눈꽃이 떠도 무슨 ​​소용이 있겠는가.
그래서 원래 코드를 화면 상단에서 화면 하단(본체 하단 아님)으로만 떨어지도록 약간 수정한 후 눈꽃송이를 제거하고 눈꽃송이를 고정 위치로 변경했습니다.

페이지를 새로고침했더니 훨씬 좋아졌습니다. 이제 수정된 코드를 게시하여 모든 사람과 공유하세요.
PS. 원저작자 링크를 못찾았습니다. 저작권은 원저자에게 있습니다 :)

코드를 복사하세요 코드는 다음과 같습니다.

(function($){
$.fn.snow=function(options){
var $flake=$('< div />')
.css ({
'위치':'고정',//'절대',
'top':'-50px',
'z-index' :'1000'
})
.html('❄');
var documentHeight=document.documentElement.clientHeight;//$(document).height()
var documentWidth=$ (문서).width();
var defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"}
var options=$.extend({},defaults, 옵션);
var 간격=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 .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()
}); //간격 종료
};// $.fn.snow 종료
})(jQuery)
$.fn.snow({ minSize: 10, maxSize: 60, newOn: 800, flakeColor: '#ccc'})