During my exploration of web templates for this blog, I came across a compelling barn-door-zoom effect which simulated navigating between pages using 3D depth. The effect was quite unique in terms of web user experience, and I wondered if it would be possible to create something similar in LiveCode. When scrolling the web template with a scrollwheel, the content of the page either split apart in the center to reveal the previous page, or two “barn doors” came together revealing new content, depending on the scroll direction. The barn door effect was combined with dynamically scaling content behind the doors, giving the illusion of zooming into, or out from, the content.
Surprisingly I was able to get a version of this working in LiveCode. The timing and event sequences needed to be just right, and even though the performance isn’t quite as smooth as a web browser running 60 frames per second, the end result is a satisfying proof of concept.
To access the stack (built in LiveCode 7), copy the following line and execute it in your LiveCode message box. Note: the stack contains a bunch of images, so it will take a several moments to download.
For the best experience, run the stack using a mouse with a scrollwheel. Scroll forward to zoom into the content, and scroll back to zoom out. If your mouse doesn’t have a scrollwheel, simply click toward bottom of the stack to zoom in, and click near the top of the stack to zoom out.