News

Add tilt to images using jQuery

Discover how to add clever tilt animation effects using the jQueryRotate plugin

Select Installation Method

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);
×