Sunday, September 7, 2014

Snow Effect using jQuery

This is very useful script for web developers.In this i have used many methods like html(),Math.random(),remove(),appendTo(),css(),clone() etc.


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>

Snow plugin

<script>
        (function($){
            $.fn.snow=function(options){
                var $flake=$('#snow').css({'position':'absolute','top':'-50px'}).html('&#10052;'),//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>
to display snow effect to call the following HTML code with ID.

HTML

<div id="snow"></div>
Please share your comments and feedback.Thanks.Please subscribe my updates via email.

No comments:

Post a Comment