08.25.2004 - Slide Show III
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. Sort of like the intro for The Love Boat, as Kevin aptly pointed out when I showed it to him.
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.
Posted by Fred on August 28, 2004 @ 10:07 pm
Posted by Fred on August 28, 2004 @ 10:08 pm
Posted by [m] on August 29, 2004 @ 1:00 am
low bandwidth servers
email me 2 ----> email@example.com
Posted by Guy on September 1, 2004 @ 8:19 am
Posted by Myself on September 8, 2004 @ 5:01 pm
Posted by Mark Wubben on October 1, 2004 @ 12:42 pm
You should use attachEvent / addEventListener to avoid trampling on any other load events.
Aside from that, v. nice :)
Posted by Phil on October 14, 2004 @ 10:07 am
Comments have been closed for this post.