Clever Geek Handbook

How do I split an image using Javascript + CSS?

I have an image like this:

alt text

I want to split it into six squares, and I can continue to loop to display the animation. Do you have any ideas to split the image into JS + CSS instead of using 6 separate image files.

+2


source to share


3 answers


Here's an article from SitePoint on animating a sprite with jQuery.



+4


source


Set it as a background image and process the position of the background.



Update: As seth mentioned, this method is called CSS Sprites. Searching google for animation with css sprites gives good results.

+8


source


There are at least two methods

  • Use image as background
  • Use CSS clip

Here is a good example of using the first technique.

+1


source






More articles:


All Articles