Before the App Store, third party developers depended on web apps to allow them to bring new games, abilities, and content to the iPhone and iPod touch. A new proof-of-concept tech demo by web developer Charles Ying shows that there is still plenty of potential left untapped for web apps, especially when you make use of Apple’s CSS Visual Effects extensions.

Yesterday, on his personal blog inside looking out, Ying posted an entry detailing his CoverFlow (zflow) demo, one part of his new open source endeavor CSS-VFX. The project is intended to be a showcase of the potential applications of Apple’s CSS Visual Effects extensions for the mobile Safari platform.

zflow uses the extensions for 3D perspective shifts and smooth transitions, mimicking the functionality of Apple’s own CoverFlow, currently used in iTunes and Leopard’s Finder. Ying describes how it achieves this in detail:

• zflow starts by loading each image from the images array. When each image is loaded, we scale the image to fit in a square region, and apply 3D CSS transforms to scale it in place.
• Reflections – zflow then takes the scaled image and creates a Canvas element that contains a gradient alpha mask of the image’s reflection (using a “reflect” function to do this) and positions the canvas element in place.
• Touch Controller – zflow creates a TouchController object, who’s job is to field touch events from Mobile Safari and calculate an appropriate offset.
• Clicking – zflow detects when no move events have been made, and zooms + rotates the focused image forward by setting a “CSS Transition”ed 3D transform on the focused image. Clicking again transitions the image back.
• Inertia – zflow achieves inertia by setting the “transition timing function” of the “tray” to an “ease-out” function, which slows things down. On the touch end event, we calculate the projected velocity and set the tray’s target position to that location. CSS Transitions handles the decay in velocity as the transition timing function executes – slowing the tray down gradually.

In practice, the demo is impressive, though not without quirks. On my iPhone, the flow was initially stuttered and jumpy. This issue mostly resolved itself as the Flickr feed used for the source images loaded fully. Once loaded, transitions were still slightly jerky, but the overall effect was fantastic. Perspective shifts and image reflection both worked flawlessly, and the view shifted from portrait to landscape mode with only minor lag and no strange visual hiccups. I should note that my test was performed over a 3G connection, which might account for my loading issues.

Ying provides instructions on how to use zflow at his Google Code site for the CSS-VFX project. It shouldn’t be long before we see this fascinating demo at work in interesting ways in web apps and iPhone optimized websites.

Go here on your iPhone (it won’t work on desktop browsers) to check out the tech demo in action, or watch the video below.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Mobile Q4: All Eyes Were on Android, 4G and the Rising Tablet Tide
• Report: A Mobile Video Market Overview
• In Q3, the Tablet and 4G Were the Big Stories