In this article explain about snow effect using jquery the following code is used for display snow effect,
In this using size and colr values are minSize:5,maxSize:10,flakeColor:white.
<script >
(function($){
$.fn.snow=function(options){
var $flake=$('#snow').css({'position':'absolute','top':'-50px'}).html('❄'),
//Get element values using ID
documentHeight=$(document).height(),
documentWidth=$(document).width(),
defaults={minSize:5,maxSize:10,newOn:200,flakeColor:"#fff"},
//Snow size and color
options=$.extend({},defaults,options);
var interval=setInterval(function(){
var startPositionLeft=Math.random()*documentWidth-100,
startOpacity=0.5+Math.random(),
sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,
endPositionLeft=startPositionLeft-100+Math.random()*400,durationFall=documentHeight*10+Math.random()*6000;
$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);
};
})(jQuery);
< / script >
No comments:
Post a Comment