01.28.2005 - Slide Show VI
Building on yesterday's experiment of a slide show taking advantage of the alpha transparency capability of the PNG image format, I give you Slide Show VI.
The idea was to have a sort of "melting" effect on the image as it transitioned from one to the next, and I think this came pretty close. The images are broken out into DIV's with staggered background-positions (125 in MSIE, 50 in everything else...more on that in a moment) and placed together to form the complete image. A corresponding number of DIVs are created with a PNG background and are placed at top:-334px and the same lefts as the image DIVs (the splices).
When the user clicks an anchor tag to view another image, the DIV's containing the masks are selected at random and descend over the image. When they have reached a point that their fully opaque portion obscures the image splice, that splice's background-image is flipped to the next image. The mask continues it decent and the new image splice appears to gradually fades in. With all of the masks descending at random, you get a very interesting effect.
MSIE is doing it exactly the way I had envisioned in my head. It uses 2 pixel wide masks that descend at a rate of 2 pixels per iteration. However, MSIE was the only browser able to handle the number of DIV's moving on the page at a reasonable rate. The other browsers I tested in (Firefox and Opera) took three times as long as MSIE to complete the transition, which was unacceptable.
To compensate, all other browsers have 5 pixel wide DIV's that descend at a rate of 5 pixels per iteration. The effect is not nearly as cool as the one in MSIE, but I'll take it. Be sure to check it out in both MSIE and something else to see the difference, and if you see a way to optimize the code to get the same performance out of non-MSIE browsers, let me know.
Tested and works in MSIE6, Firefox 1.0, Opera 7.2, and should work in Safari though I've not tested it. Valid XHTML, and degrades to inline images in Netscape 4.
anyway, i'm using your Slide Show IV for my photo gallery
i love the transformation effect
but, it just didn't work on Opera
but i decide to still using it.
url: http://deepblue.indika.net.id/gallery/
i'm very lucky
when i browse somewhere on the net
and found this slayeroffice
Thanks a lot, Steve ;)
Posted by Deny on February 17, 2005 @ 2:18 am
Comments have been closed for this post.