This is very useful script for web developers.In this i have used many methods like html(),Math.random(),remove(),appendTo(),css(),clone() etc.
to display snow effect to call the following HTML code with ID.
Live DemoDownload Script
Please copy and Paste below library file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
Please copy and Paste below library file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
Snow plugin
<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:2,maxSize:8,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>
(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:2,maxSize:8,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>
Jquery function
<script>
$(document).ready( function(){
$.fn.snow();
});
</script>
$(document).ready( function(){
$.fn.snow();
});
</script>
HTML
<div id="snow"></div>
Please share your comments and feedback.Thanks.Please subscribe my updates via email.
No comments:
Post a Comment