Photo Fader v2

The first time I posted this demo, I got a few confused comments on how to actually use it and what the purpose was.  This time around I’ve added a few more UI elements to better explain what is going on.  Tool tips when hovering over the mod and code buttons, a thumb and some depth was added to the scrollbar and if you watch in the beginning there is a “look here” flare.

Launch Demo
Download Source

I’ll post the full instructions again just for fun, too.

Instructions:
To fade the photos between each other providing a faux 3D effect move your cursor along the lower dark gray rectangle.

The upper right squares are clickable and show code (lower light gray squares) and modify the demo (upper row dark gray squares that turn orange).

• Mod 1 – Change the x position text block in the upper right to use a custom font.
• Mod 2 – Randomize the x position when scrolling on the lower dark gray rectangle, just for fun.
• Mod 3 – After seeing the photo flip around randomly, I was reminded of a music video and attempted to add sound playback while scrolling the lower dark gray rectangle.  A better job synching the sound and the movement could certainly be done but the concept is there.

Advertisements