3D Coverflow for iPhone Using CSS-VFX
Categories: Featured, Resources, iPhoneization
Loading ...
Loading ...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
May 6th, 2009 at 11:08 am
Create a 3D Coverflow for iPhone using CSS, Javascript…
You’ve been kicked (a good thing) – Trackback from iPhoneKicks.com – iPhone SDK links, community driven…
May 10th, 2009 at 10:36 am
This is a great start to a dying project unfortunately. Charles has been too busy to fix the major issues on it and takes months to respond to any discussions. I took his original code and created the current static version that you have used there. Previously it called a Flickr feed for the image array, and I fixed some other small things – took out unused HTML and functions, cleaned it up a bit.
The main problem with this is when the image is enlarged, it’s distorted. With the current images it’s hard to tell but try putting your own in there and watch when you click on one for focus. It’s zooming in wrong basically.
If someone can take a look, it could be a cool project. The main problems are the:
- Clicked image is out of focus when enlarged.
- Unable to make the image full-screen
I was thinking that possibly the Magic/JQTouch fellaz could take a look. Maybe this project needs to be re-done with some of their expertise? Unfortunately this Coverflow project is only cool as a demo but unusable as any real photo slideshow on a site. If anyone wants to redo this and get an ugly but working slim mobile version going, I will join and help.
Anyone else get this to work in the real world? If so, slap a link in your response. Thanks !!!
June 25th, 2009 at 7:30 am
This is very close to the real mccoy.
If it were possible to have just a little bit more hardware acceleration, you’d have a winner.
There are some subtle rough edges, but great effort.
This is certainly as smooth of an experience as I have seen on any other phone outside of iPhone.
November 9th, 2009 at 2:25 pm
[...] Converflow para iPhone utilizando CSS-VFX Categories: iPhone Tags: desenvolvimento, Interface, Internet, iPhone [...]
February 24th, 2010 at 2:01 am
[...] und CSS Standards beherrscht, sind mittlerweile auch das Auslesen der Position des Gerätes oder Animationen direkt auf mobilen Webseiten möglich. Der Aufwand für die Erstellung einer mobilen Webseite ist [...]