By
One of the plugins Axel Aubert lists within his code is jQueryRotate, authored by Paweł Witkowski. Here we’ll take a closer look at this plugin by demonstrating some of the quick options it gives you for applying image rotations – either at set angles or within smoother animations. You can trigger these to start when the page loads or on mouse rollover events – then you can investigate the more advanced parameters to achieve more sophisticated results.
Get plugin files
Begin by visiting code.google.com/p/jqueryrotate/ to download the plugin. Follow the links on the left panel under Featured>Downloads to click the green download buttons and obtain the files. You can use either, so grab jQueryRotate.2.2.js or alternatively jQueryRotateCompressed.2.2.js and simply drop into the root of your page.
Link the scripts
In the <head> of your HTML add a <script src=””> declaration for jQuery. Here we’ve linked to the latest version on the online repository. Below this you must place another <script src=””> tag pointing to one of the .js files you downloaded in Step 1.
001 <head> 002 <script src=”http://code.jquery. com/ jquery-2.0.1.min.js”></script> 003 004 <script src=”jQueryRotate.2.2.js”></ script> 005 </head>
Image stack
Next up we’ve added a row of four PNG icons to our page <body>, which reside in the root of our document. In addition to any style classes you may wish to add, you’ll need to give each one an id attribute:
001 <img src=”icon1.png” id=”image1”/> 002 <img src=”icon2.png” id=”image2”/> 003 <img src=”icon3.png” id=”image3”/> 004 <img src=”icon4.png” id=”image4”/>
Simplest tilt
Add new <script> tags to the page head and then a $(document).ready() function. This is where all code will go, but start with the most basic jQueryRotate method by tilting the first icon by 60 degrees:
001 <script>
002 $(document).ready(function() {
003 $(“#image1”).rotate(60);
004 });
005
006
007 </script>
Mouseover events
Preview the page and you’ll notice the rotation occurs immediately. Now we’ll extend the method to trigger a 45-degree tilt when the cursor passes over icon2.png. This can be done using the bind command to attach mouseover and mouseout events like so:
001 $(“#image2”).rotate({
002
003 bind:{
004
005 mouseover : function() {
006 $(this).rotate(45); 007
008 mouseout : function() {
009 $(this).rotate(0);
010 }
011 });
Smoother tilt
By adding an animateTo command before our angle values, the plugin makes the rotation motion much smoother. We’ll try this on icon3.png and rotate it 210-degrees, then back to zero when the mouse moves off. Save the page and preview to check the effect.
001 $(“#image3”).rotate({
002
003 bind:{
004
005 mouseover : function() {
006 $(this).rotate({animateTo:210})},
007
008 mouseout : function() {
009 $(this).rotate({animateTo:0})}
010 }
011
012 });
Keep on spinning
The plugin suggests methods for spinning images endlessly from page load, the first of which uses the setInterval() function. Here you are able to alter angle increments as well as the millisecond speed value to change the effect:
001 var angleVal=0;
002 setInterval(function(){
003 angleVal+=3;
004 $(“#image4”).rotate(angleVal);
005 },
006 20);
