slayeroffice - web experiments gone horribly awry

Looking for the drawings? They're over here, and my drawing blog is this way.

Slide Show III

  • Current Version: 1.0
  • Last Revision: 08.25.2004
  • Language: Javascript
  • Requires: MSIE6, Mozilla, Firefox, Opera 7.5

This idea occured to me while I was at Mark Pilgrim's site reading his hilarious (and sadly, true) "Why Specs Matter" article.

Mr. Pilgrim's header on his site is a single image broken out into thirty-six <div> elements with the background-position staggered to create a mosaic effect. I thought a slideshow that would render the images in this manner might prove interesting.

As many <img> elements as you like are placed in a container element with all of their display's set to "none". When the script initializes, it loops over the images in the container and creates references to them, and then creates fifteen <div> elements, setting the SRC attribute of the first image as the background-image of each <div>. The background-position is then staggered accordingly and the fifteen <div> elements appear to be a whole image.

When you click on a navigation item (created dynamically based on the number of images found) the individual <div> elements contract until they are two pixels wide. The requested image is then broken up and the <div> elements expand until they are 100 pixels wide and the image once again appears whole. The background-position of each <div> is adjusted during the animation to make it appear as though the image is collapsing on itself.

Works in MSIE6, Mozilla, Firefox, Opera 7.5 (really, really well - very fast and smooth) and sort of works in Safari. The markup is completely semantic and valid and all behavior is applied via script.