By
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
