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.