News

Animate icons with jQuery

Humaan’s Dedy Lawidjaja describes how John Cheese’s animated rollover icons are rendered by combining sprite sheets with jQuery

Animate-icons-with-jQuery

Animate icons with jQuery

DOWNLOAD TUTORIAL FILES

Prepare the sprite sheet

We start with the sprite sheet graphic, the image containing each individual frame of animation. Our example PNG, the TV icon as seen on johncheese.com.au, was created by placing all the frames in Photoshop and ensuring the dimensions are consistent – in this case 121px wide, 96px high. The frame sequence should also be seamless, with our ‘tv-sprite.png’ spanning 97 frames and 11737 pixels wide.

Attaching jQuery and CSS

Create a new HTML page and inside the <head> tag include a link to the latest jQuery JavaScript library. You can download the file from jquery.com and run it locally, whereas here we’ll link to a CDN version available online. Create an empty CSS file named ‘style.css’, place it in the root of your page and link here also.

001    <head>
002    <script type=”text/javascript” src=
”http://cdnjs.cloudflare.com/ajax
/libs/jquery/2.1.1/jquery.min.js”>
</script>
003    <link rel=”stylesheet” type=”text
/css” href=”style.css”>
004    </head>

Styling the <div> element

Inside the HTML document’s <body> we’ll add an empty <div> element that we will be adding the interaction to. Make sure you set the id as ‘sprite’. Next open your empty style.css file to set the default styling rules, including the width/height of a single frame. We then attach our sprite sheet as the element’s background image, setting the background-position x and y coordinates to 0, 0. This ensures we start on the first frame.

001    HTML:
002    <div id=”sprite”></div>
003    CSS:
004    #sprite {
005        width: 121px;
006        height: 96px;
007        background: url(tv-sprite.png) 
no-repeat 0 0;
008    }
009    

The sprite state variable

Just before the closing </head> tag we begin adding our interaction code. For the remaining steps, the code will be written into this section. Our listing begins by creating a variable for storing the sprite state, and for better organisation we’ll store it globally. Here we initialise the width with the sprite sheet’s full width, a single frame width, the current background-position’s x-position and also a timer object that will support our interaction.

001    <head>
002    ...
003    <script type=”text/javascript”>
004    var sprite = {
005        width : 11737,
006        frame_width : 121, 
007        current_xpos : 0, 
008        timer : null
009    };
010    </script>
011    </head>
012    

Render a single frame

To produce the animation effect, we will be manipulating the x-position coordinate of the element’s CSS background-position property using a time interval. Every time a frame is rendered the sprite sheet’s x-position is offset by the width of the frame – as defined in our sprite global. In our <script> tag from the previous step, add the renderFrame() function definition as follows:

001    function renderFrame(){
002        var next_position = sprite.
current_xpos + sprite.frame_width;
003        if (next_position >= sprite.width){
004            next_position = 0;
005        }
006        $(‘#sprite’).css(‘backgroundPosition’, -next_position + ‘px 
0px’);
007        sprite.current_xpos = next_position;
008    }
009    

Initialise the behaviour

Finally we bind the interaction to happen on hovering over the target element. Using the jQuery hover method, we start the timer interval to call the renderFrame() function every 10ms. It will then stop the interval completely when the cursor hovers out of the element, halting the animation. Save and preview in your browser. When you hover your mouse on top of the element you should see it animate through each frame of the sprite sheet endlessly until you hover out.

001    $(document).ready(function(){
002        $(‘#sprite’).hover(function(){
003            sprite.timer = setInterval(renderFrame, 10 );
004        }, function(){
005            clearInterval( sprite.timer );
006            sprite.timer = null;
007        });
008    });
009

Improve your web design skills with Web Designer. Download issues direct from GreatDigitalMags.com or buy print issues from ImagineShop

×