Create a jquery rotate plugin: Explained with stepwise instructions

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

You’ve seen many transition effects on several sites. Most are them are mainly about fading in/out, sliding up/down. Today I’m gonna show how to make a jquery plugin which can rotate the DOM element. So, before move into tutorial here is a demo,

Demo
Download

Step 1:

First of all we will write the skeleton of our jquery plugin. If you already know how to make jquery plugin then it’s good but if you don’t then you should check this out first. So create a file named “jquery.rotate.js” and put the following code in it. This is the basic structure of your plugin.

(function($){
	$.fn.rotate = function(options){
		return this.each(function(){
		});
	}
})(jQuery);

Step 2:

Now the main aim behind making a plugin is reuse of code so we will try to make our code easily customizable. For this we will add some default options so as to save user of our plugin from writing a long list of arguments while calling our function. Now modify “jquery.rotate.js” file as shown below.

(function($){
	$.fn.rotate = function(options){
		var defaults = {
			angle: 90,
			axis: 'top left',
			duration: '500ms',
			type: 'ease-in',
			delay: '0ms'
		}
		var options = $.extend(defaults,options);
		return this.each(function(){
		});
	}
})(jQuery);

All the options under “defaults” variable are self explanatory.These are the factors which will decide what kind of rotation we will get.

Step 3:

If you already know CSS 3 then you must be aware of rotations using CSS 3. We will employ CSS 3 rotations in order to make DOM elements rotate. We will create basic CSS 3 rotation property using all the options as described in step 2 and then apply it to the DOM element using jquery. So,let’s modify “jquery.rotate.js”.

function($){
	$.fn.rotate = function(options){
		var defaults = {
			angle: 90,
			axis: 'top left',
			duration: '500ms',
			type: 'ease-in',
			delay: '0ms'
		}
		var options = $.extend(defaults,options);
return this.each(function()
{
obj = $(this);

/*following two lines set rotation properties*/
transition = "-webkit-transform "+options.duration+" "+options.type+" "+options.delay;
obj.css("-webkit-transition",transition);
transition = "-moz-transform "+options.duration+" "+options.type+" "+options.delay;
obj.css("-moz-transition",transition);
transition = "-o-transform "+options.duration+" "+options.type+" "+options.delay;
obj.css("-o-transition",transition);
transition = "transform "+options.duration+" "+options.type+" "+options.delay;
obj.css("transition",transition);

/*following lines change the axis of rotation*/
obj.css("-webkit-transform-origin",options.axis);
obj.css("-moz-transform-origin",options.axis);
obj.css("-o-transform-origin",options.axis);
obj.css("transform-origin",options.axis);
});
}
})(jQuery);

Step 4:

Now the only thing left is to rotate the DOM element. It’s pretty simple. We’ll again follow the same path. Create a string of CSS3 property and apply it to element using jquery’s “.css()” method. So just add the following lines after line 30 and at the same indent level.

/*basic rotation*/
var rotangle = "rotate("+options.angle+"deg)";

obj.css("-webkit-transform",rotangle);
obj.css("-moz-transform",rotangle);
obj.css("-o-transform",rotangle);
obj.css("transform",rotangle);

/*rotation ends here*/

Now our plugin is complete. All we need now is to put our plugin to work.For this simply include the following line in your html page’s header.

<script type="text/javascript" src="jquery.rotate.js"></script>

Now simply call “.rotate()” on any DOM element you want to rotate.

Note: I’m providing you with the .zip file of the above tutorial which also contains a working demo of the plugin.

blog comments powered by Disqus