Wednesday, September 5, 2012

jQuery falling letters plugin

 Falling letter jQuery plugin.

plug in:
(function($){
    $.fn.fallLetters = function(options){  
        // the default options
        var defaults = {  
            minFont:14, // minimum font size to be displayed(in pixel)
            maxFont:20, // maximum font size to be displayed(in pixel)
            minSpeed:2000, // should be larger than the maxspeed, 1000 = 1 sec
            maxSpeed:1000, // the smaller the amount the faster it fall, 1000 = 1 sec
            fading:true // fading while falling effect
        }          
      
        // to override the defaults of each option
        var options = $.extend(defaults, options);
        return this.each(function(){
      
            // declaration of variables
            var cont=$(this);  
            var contWidth=($(this).width())-50;
            var contHeight=($(this).height())+150;
          
            // container's CSS
            cont.css({"position":"relative","overflow":"hidden"});
          
            // wrap the letters with span
            cont.children().andSelf().contents().each(function(){
                if (this.nodeType == 3) {
                    var $this = $(this);
                    $this.replaceWith($this.text().replace(/(\w)/g, "<span>$&</span>"));
                }
            });      
          
            // onload random span left and font
            reset();  
            cont.find("span").each(function(){
                $(this).css({"left":randomLeft(),"fontSize":randomFont(),"position":"absolute"});
            });
          
            // loops every 2 mins
            setInterval(function(){
                cont.find("span").each(function(){
                    $(this).animate({"top":contHeight+"px","opacity":ifFallAndFade()},randomSpeed(),function(){
                        var Left=randomLeft();
                        $(this).css({"left":Left,"fontSize":randomFont()});
                        reset();
                    });
                });
            },100);
          
            // fading while falling
            function ifFallAndFade(){
                if(options.fading){
                    return 0;
                }
                else{
                    return 1;
                }
            }
          
            // randomize left css of each character
            function randomLeft() {
                var maxLeft= contWidth;
                var left= Math.floor(Math.random() * maxLeft + 1) + 'px';
                return left;
            }
          
            // randomize the time of each character
            function randomSpeed(){
                var speed=Math.floor(Math.random() * options.minSpeed + options.maxSpeed);
                return speed;
            }
          
            // randomized the font size of each character
            function randomFont() {
                var fontSize= Math.floor(Math.random() * options.maxFont + options.minFont) + 'px';
                return fontSize;
            }
          
            // reset or back to top, -100px so that it will be hidden
            function reset(){
                cont.find("span").css({"top":"-100px","opacity":"1"});
            }
        });  
    };
})(jQuery);

script:
<script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#cont").fallLetters({
                minFont:10,
                maxFont:24,
                minSpeed:3000,
                maxSpeed:1500,
                fading:true
            });   
        });   
    </script>

html:
<div id="cont">ABCDEFGHIJKLMNopqrstuvwxyz1234567890</div>

Hope this will help!..
(i made this one)

No comments:

Post a Comment