Skip to content

HTML5: CSS Sprites

See the demo.

<!doctype html> 
	<style type="text/css"> 
		.sprite {
		.up { background-position-y: -7px;}
		.down { background-position-y: -102px;}
		.right { background-position-y: -55px;}
		.left { background-position-y: -151px;}
		.frame0 { background-position-x: -0px;}
		.frame1 { background-position-x: -36px;}
		.frame2 { background-position-x: -73px;}
		.frame3 { background-position-x: -107px;}
	<script type="text/javascript"> 
var counter=0;
setInterval(main_loop, 250);
function main_loop(){
  counter = (counter+1) % 3; // 0,1,2,3,0,1,2 ...
  document.getElementById("up").setAttribute("class", "sprite up frame"+counter);
  document.getElementById("down").setAttribute("class", "sprite down frame"+counter);
  document.getElementById("right").setAttribute("class", "sprite right frame"+counter);
  document.getElementById("left").setAttribute("class", "sprite left frame"+counter);
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
	<title>CSS Sprites + JavaScript </title> 
	<img id="up" src="transparent.gif" /> 
	<img id="down" src="transparent.gif" /> 
	<img id="right"	src="transparent.gif" /> 
	<img id="left" src="transparent.gif" /> 
	<p>— We are not gifs!</p> 

Credits and notes:

Published inenglish


  1. Zeh Zeh

    background-position-y and background-position-x don’t works on Firefox 4

  2. I new come here. but it’s amazing. we created like this too. to all comments fans. for inspiration comment.

Leave a Reply

Your email address will not be published. Required fields are marked *