Hi,

I would like to create a sprite animator using Jquery in order to create animated PNGs.

  A sprite is a group of images "glued" together to make a large one.
We create the illusion of movement while moving into that big image in a smaller div (with overflow set to "hidden") used as a mask.

For exemple, I glued together 60 png images organized into 4 columns and 15 rows.
That big image is 400 pixels large and 3000 pixels long (so each images into that sprite is 100px x 200px)

1. First I have to create a div how is 100x200px (class=image_mask)
2. In that div I add the sprite and I set display to "none"
   
3. Using Jquery, I preload the sprite
4. Again with Jquery we get the size of the sprite and we make some math :
1. We get the width = 400 and the height = 3000
2. We get the size of the image_mask used to embbed the sprite (width: 100px; height: 200px)
3. We guess the number of images into the sprite -> (400/100)*(3000/200) -> 4(columns)*15(rows) -> 60 images
   
4. We move frame to frame using a delay
5. If we decide to use a loop (infinite or defined), when we get to the 60's image, we go back to the first frame and we do it again.

  

   
 <style type="text/css">
   
.image_mask {
   
position: relative;

   
width: 100px;
   
height: 200px;
   
overflow: hidden;
   
}
   
.image_mask img {
   
position: absolute;
   
top:0px;
   
left:0px;
   
}
   
</style>
  
    

     
<div class="image_mask">
     
<img src="path/to/mysprite.png" />
     
</div>