Charles Ying has created a collection of components and code examples that illustrate the power of CSS visual effects on the iPhone. Officially named CSS-VFX, the project has yielded it’s first very cool little web app called Zflow.
Zflow uses Javascript and CSS transforms and animations to emulate the Apple’s native coverflow. It starts by loading each image from the an array, scales them to fit in a square region, and applying 3D CSS transforms to scale it in place. To add the reflections, Zflow creates a Canvas element that contains a gradient alpha mask for each image (using a “reflect” function to do this) and positions the canvas element in place. A TouchController object fields touch events from Mobile Safari and calculates the appropriate offset.
When you click on an image, Zflow zooms + rotates the focused image forward by setting a “CSS Transitioned” 3D transform on the focused image. Clicking again transitions the image back.
When sliding through the image set, 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, the projected velocity is calculated and sets 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.
It really is a beautiful piece of work. For those who are not browsing with an iPhone/iTouch, check out the video:
Check out a simple demo (iPhone/iTouch only) here
See Charles’ demo using the Flickr API (iPhone/iTouch only) here
Download the source here