Joonas Lehtinen of IT Mill has shown us something that we should probably never do. As a proof of concept he decided to see if it was “possible to do a 3D-style animation in plain JavaScript without Flash, SVG, Canvas or any other fancy stuff.”

He ended up with a solution that:

  • Slice a image in 1px wide slices
  • Embed all the slides in the HTML using data-uris to avoid loading large number of images
  • Move and scale image slices for each animation frame to create some nice effect

So, first you litter your HTML with:

HTML:

  1.  
  2. <img id=“slice-0″ src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABACAIAAABUc4oXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAAewwAAHsMBvJeX2gAAACFJREFUCNdj+P//PxMDAwPd8INH75nw2Mnw/ftvBjq6CQDNIw8MeLLR3AAAAABJRU5ErkJggg==”/>
  3. <img id=“slice-1″ src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABACAIAAABUc4oXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlvRkZzAAAAAQAAAAAAEXZlawAAAAlwSFlzAAAewwAAHsMBvJeX2gAAAEpJREFUCNdj+P//PxMDAwNN8PsP35lOnn3MdOzUQ6brN18xvXrzlenJs49M+OwUE+Vh4uZiZbI2V2DSUBVluHPvDcO/f/8YaOROAMXBIDUsb8h5AAAAAElFTkSuQmCC”/>
  4.  

and then you put them all together via JavaScript:

JAVASCRIPT:

  1.  
  2.         // Draw a frame
  3.         function draw(x) {
  4.                 var prevx=0;
  5.                 for (i=0;i&lt;384;i++) {
  6.                         var rad = i*3.14/384;
  7.                         var nextx = Math.round((1-Math.cos(rad))*180);
  8.                         var h=Math.round(40+50*Math.sin(rad));
  9.                         var s = document.getElementById(“slice-”+((i+x*2)%384));
  10.                         s.height=h;
  11.                         var w = Math.round(nextx-prevx);
  12.                         if (w==0) {
  13.                                 s.style.display=“none”;
  14.                         } else {               
  15.                                 s.style.display=“block”;
  16.                                 s.width= w;
  17.                                 s.style.top=“”+(50-Math.round(h/1.5))+“px”;
  18.                                 s.style.left=“”+(prevx)+“px”;
  19.                         }
  20.                         prevx=nextx;
  21.                 }
  22.         }
  23.        
  24.         // Animate the images
  25.         var frame=0;
  26.         function animate() {
  27.                 draw(frame++);
  28.                 setTimeout(“animate()”,1);
  29.         }
  30.  
  31.         // Initialize the image slices
  32.         for (i=0;i&lt;384;i++) {
  33.                 var s = document.getElementById(“slice-”+i);
  34.                 s.style.position=“absolute”;
  35.                 s.style.display=“none”;
  36.         }
  37.         animate();
  38.  

Then sit and watch the animation.

jsanimate