PNG/JPEG Animation Example:

"Animated" PNG:
PNG Animation
"Animated" JPEG:
JPEG Animation

The images:

PNG Animation
JPEG Animation

The code:

<html><head><title>PNG/JPEG Animation Example</title>
<script type="text/javascript">
var oldonload = window.onload;
window.onload = typeof oldonload != 'function' ? function(){animate();} : function(){oldonload();animate();};
function animate(){
	var els = document.getElementsByTagName('img');
	for (i=0, ii=els.length; i<ii; i++){
		if (els[i].className.match("(^|\\s)frameimg(\\s|$)")){
			var el = els[i], timeout = els[i].className.match("(^|\\s)fps(\\d{1,3})(\\s|$)");
			timeout = timeout ? 1000 / timeout[2] : 0;
			frame(el, timeout);
		}
	}
}
function frame(el, timeout){
	var framex = parseInt(el.parentNode.style.width), offset = el.style.right ? parseInt(el.style.right) : 0;
	el.style.right = (offset > el.width - framex * 2 ? 0 : parseInt(offset) + parseInt(framex))+'px';
	self.setTimeout(function(){frame(el,timeout)}, timeout);
}
</script>
<style type="text/css">
	.frameimg {position:relative;}
	.framediv {overflow:hidden; position:relative;}
</style>
</head><body>
<div class="framediv" style="width:100px; height:100px;">
	<img src="motion.png" class="frameimg fps10" height="100" width="1500" alt="PNG Animation">
</div>
<div class="framediv" style="width:143px; height:100px;">
	<img src="motion.jpg" class="frameimg fps8" height="100" width="1287" alt="JPEG Animation">
</div>
</body></html>

Back to the Shroomery