Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to rotate a text

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 150
    Comment on it

    As we see in many  website some text get rotated and other text come in its place this is known as text rotation. It is a very basic thought where we can display more than one word without taking much space by simply rotating an individual word with group of others word.

    For including text rotation effect in our page first we have to create a <h1> tag which contain more than one <div> tag containing some quotation, and have to give some id to <h1> tag as shown below.

    <h1> I am <div id="rotation"> <div>a writer.</div> <div>an inventor.</div> <div>a cricket fan.</div> <div>a coffee lover.</div> </div> </h1>

    Now we to add below jQuery code in our html document.

    (function($){
        $.fn.extend({ 
            rotaterator: function(options) {
     
                var animations = {
                    fadeSpeed: 500,
                    pauseSpeed: 100,
    				child:null
                };
                 
                var optns = $.extend(animations, options);
             
                return this.each(function() {
                      var option =optns;
                      var object = $(this);                
                      var items = $(object.children(), object);
    				  items.each(function() {$(this).hide();})
    				  if(!option.child){var next = $(object).children(':first');
    				  }else{var next = option.child;
    				  }
    				  $(next).fadeIn(option.fadeSpeed, function() {
    						$(next).delay(option.pauseSpeed).fadeOut(option.fadeSpeed, function() {
    							var nxt = $(this).next();
    							if (nxt.length == 0){
    									nxt = $(object).children(':first');
    							}
    							$(object).rotaterator({child : nxt, fadeSpeed : option.fadeSpeed, pauseSpeed : option.pauseSpeed});
    						})
    					});
                });
            }
        });
    })(jQuery);
    
     $(document).ready(function() {
            $('#rotation').rotaterator({fadeSpeed:400, pauseSpeed:100});
     });

    Note:- the id which we provided in our <h1> tag should be same as that of  which we provided in above jquery code.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: