satine.org – Building CoverFlow for Safari on iPhone

satine.org – Building CoverFlow for Safari on iPhone

The zflow demo in CSS-VFX uses the Apple CSS Visual Effects extensions for hardware accelerated (on iPhone!) 3D perspective correct transforms and easily animated transitions. HTML 5 Canvas is used for simulating reflections. 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.