satine.org

by Charles Ying

Building CoverFlow for Safari on iPhone

November 6th, 2008

Did you know that 3D graphics and animation is possible with Safari on iPhone?

If you have an iPhone, try out the CoverFlow (zflow) demo live with a live Flickr feed.

This CoverFlow demo is part of a new open source project I’ve started, CSS-VFX. The idea with CSS-VFX is to demonstrate all the cool things that are possible with Apple’s CSS Visual Effects extensions.

How does it work?

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.

What’s next?

I hope that CSS-VFX can become a series of graphics gems that clearly illustrate how to use CSS Visual Effects, as well as talk about some of the corner cases and best practices to get the best performance. If you come up with something you’d like to include, please let me know. I’ll be tinkering with a few more gems myself, just watch the project for more as time goes on.

And tell a friend, I can’t wait to see what everyone else does with these great new features in Safari on iPhone.

Where to learn more

The CSS-VFX open source project is a good place to start. You can just use the zflow code in your own iPhone web pages (there’s docs on how to do that); and deep dive into the innerworkings of zflow to understand what exactly is going on.

Also, check out Apple’s proposed extensions: CSS 3D Transforms, CSS Transitions, and CSS Animation. They provide full specifications on what’s possible. Of course, there are a few gotchas when using these in practice, and I hope to document these as things progress.

Technorati Tags: , , , ,

Tags: , , , ,

This entry was posted on Thursday, November 6th, 2008 at 8:22 am and is filed under Featured, Life, Technology. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Previous:
Next:

45 Responses to “Building CoverFlow for Safari on iPhone”

  1. Ajaxian » CSS-VFX: CSS Visual Effects Tutorials and Components Says:
    November 7th, 2008 at 4:00 am

    […] has a blog entry with a video showing off a mobile Safari demo of using Apple’s CSS Visual Effects to create a […]

  2. omtv Says:
    November 7th, 2008 at 7:42 am

    is it me or something wrong with the script? the demo of 3d coverflow does not work in firefox 2?

  3. Samuel Hallé Says:
    November 7th, 2008 at 7:51 am

    Nicely done! Great to see improvement in iPhone web development.

    One comment though, using jQuery on an iPhone application may be a little bit of overkill.. Especially for a little bunch of code like that. A lot of iPhone users are on Edge and 25+kb takes a lot of time to download.

  4. CoverFlow in Safari for iPhone: Proof of Concept With Promise | TheAppleBlog Says:
    November 7th, 2008 at 9:00 am

    […] on his personal blog inside looking out, Ying posted an entry detailing his CoverFlow (zflow) demo, one part of his new open source […]

  5. dave Says:
    November 7th, 2008 at 9:13 am

    @omtv: RTFA

    nice demo, thanks. project looks very interesting.

  6. CoverFlow in Safari for iPhone: Proof of Concept With Promise | Gadget News and Reviews Says:
    November 7th, 2008 at 9:22 am

    […] on his personal blog inside looking out, Ying posted an entry detailing his CoverFlow (zflow) demo, one part of his new open source […]

  7. James Urquhart Says:
    November 7th, 2008 at 1:29 pm

    Nice work. Although it comes across as a bit quirky on the real device – still, a good start. :)

  8. CoverFlow in Safari for iPhone | MirthLab Says:
    November 7th, 2008 at 2:03 pm

    […] If you’re new here, you may want to subscribe to my RSS feed or follow me on Twitter. Thanks for visiting!This is a really interesting proof of concept: Building CoverFlow for Safari on iPhone […]

  9. CSS-VFX: CSS Visual Effects Tutorials and Components - Video Says:
    November 8th, 2008 at 4:37 am

    […] a blog entry with a video showing off a mobile Safari demo of using Apple’s CSS Visual Effects to create a […]

  10. Charles Ying Says:
    November 9th, 2008 at 11:10 pm

    @Samuel Hallé: The zflow.js does not require jQuery anymore (although the example file still does… for now)

  11. Entwickler: Konferenz-Videos, Cover-Flow und Programmier-Ansätze Says:
    November 11th, 2008 at 3:14 am

    […] interessante Links für iPhone-Entwickler: TAB macht auf eine Web-basierte Möglichkeit aufmerksam, Cover-Flow Effekte mit Apple’s Visual Effects CSS-Extensions zu generieren. Dieses Video (Youtube-Link) gibt einen […]

  12. Brente Says:
    November 13th, 2008 at 9:16 pm

    Excellent work. I saw the GoogleCode page, but there is no download .zip or anything. Could you post a simple downloadable version of it with a local array of images? That would be helpful for people to see a realistic implementation and usage.

    Also it would be cool to add easy configurations to allow the touch/flip/zoom feature to just zoom and not reverse or do nothing if needed.

    Thank you. Great stuff.

  13. Brente Says:
    November 23rd, 2008 at 10:40 am

    Hello All –

    I have modified Charles’s original Coverflow to remove Jquery, Flickr and made the images a local static array. Check it out (.ZIP) and help make this CSS FX even better at: http://groups.google.com/group/css-vfx

    Cheers, brente

    Modifications:

    deleted jquery js link – no calls to it anymore deleted flickr image feed function – not needed for static example deleted window.setTimeout func – apple meta tags replace this functionality

    changed jquery functions to getElementById().className – eliminates jquery

    added id “container” to the main div – used for orient change identifier added local image array function – requested feature for static version added onload init function – replaces jquery onload added 5 demo images – replaces flickr image feed added metatags for web apps – apples enhancement that hides url bar for web apps added xhtml 1.0 strict doctype

  14. inside looking out » Blog Archive » Nokia Finally Answers the iPhone Says:
    December 2nd, 2008 at 1:47 am

    […] twist – a physical keyboard and Flash + video support. Apple’s mobile web efforts have promise, but people sure do ask for […]

  15. mark Says:
    December 16th, 2008 at 11:34 pm

    Hi, i was wondering if anyone modded this to allow image captions? If not how could it be done? thanks in advance.

  16. cameron Says:
    December 17th, 2008 at 3:03 pm

    Yes! Can anyone help with captions? With my limited js experience I’ve attemped to add caption functionality but have hit a wall. If anyone is interested I can go into more detail, although it may not help because I do not have a functioning solution.

  17. links for 2008-12-22 :: User First Web Says:
    December 22nd, 2008 at 1:08 am

    […] inside looking out » Blog Archive » Building CoverFlow for Safari on iPhone Nice demonstration of Mobile Safari css effects used to make a smooth cover flow effect. (tags: css iphone mobile safari javascript coverflow) […]

  18. satine.org » Macworld 2009 Predictions Says:
    December 30th, 2008 at 8:57 pm

    […] – Hardware accelerated 3D Web graphics with CSS Visual Effects. The specs exist, they’re implemented on iPhone, and definitely coming to […]

  19. Extenuating Circumstances – links for 2009-01-13 Says:
    January 13th, 2009 at 2:07 am

    […] satine.org » Building CoverFlow for Safari on iPhone (tags: iphone 3d css canvas extension js via:jerakeen) […]

  20. WebKit CSS Animation / accelerated / VFX « Cjed Audio blog Says:
    February 6th, 2009 at 5:12 pm

    […] can discover a last example of CoverFlow like animation (zflow) on iPhone Safari, that uses CSS Visual Effects extensions […]

  21. Mobile Safari rendert CSS in 3D « we/think/web Says:
    February 7th, 2009 at 1:57 am

    […] daraus entstehenden Möglichkeiten zeigt die Cover-Flow-Demo. Interessant: diese Demo nutzt spezielle Events, die auf das Touchpad zugeschnitten sind, und auch […]

  22. css animationen - wozu nochmal? - qrios is it Says:
    February 8th, 2009 at 5:07 am

    […] schöne Sachen gehen damit schon: Coverflow in […]

  23. pattiefmartin Says:
    March 10th, 2009 at 10:57 am

    Yes, it's cool, and useful for me
    Reverse Access Livedoor

  24. document management software Says:
    March 10th, 2009 at 11:49 pm

    It sounds nice from your point of view, I might give it a try..

  25. 3D Coverflow for iPhone Using CSS-VFX | iPhoneized Says:
    May 4th, 2009 at 4:17 pm

    […] 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. […]

  26. coomsie Says:
    May 5th, 2009 at 11:40 pm

    well done …..

    you are legend mate

  27. Pete Says:
    May 8th, 2009 at 12:55 pm

    Just stumbled upon zflow – excellent stuff. I dunno if you’re tracking these comments, but I ran into in interesting thing. I browsed to the sample zflow url (http://css-vfx.googlecode.com/svn/trunk/examples/zflow.html) on my iPhone and, while it seemed to work a-ok, the reflections were solid (no gradient). Now, I am using v3 (beta 5) of the iPhone OS, so perhaps this is the issue.

    I did, in fact, check the page out in google chrome. And while it doesn’t allow the photos to be animated, it does show a reflection. And the reflection is sold, not a gradient. Not sure if this even a valid data point, but there you go.

    Should I be seeing gradients?

    Thanks so much for your time and kudos for all the hard work.

  28. Pete Says:
    May 8th, 2009 at 2:36 pm

    OK…a follow up. I didn’t have access to the iPhone simulator when I wrote my last post. I just tried the site and it works on all iPhone revs up to 2.2.1. It fails on iPhone 3.0. So it is clearly a problem with OS 3.

  29. Pete Says:
    May 18th, 2009 at 6:48 am

    I posted this problem on the Apple Bug Reporter and got the following response:

    12-May-2009 06:49 PM Patrick Collins : Engineering has provided the following feedback regarding this issue:

    This is a content bug. The reflection is being drawn with a canvas:

    function reflect(image, iwidth, iheight, canvas) { canvas.width = iwidth; canvas.height = iheight / 2;

    var ctx = canvas.getContext("2d");

ctx.save();

ctx.translate(0, iheight - 1);
ctx.scale(1, -1);
ctx.drawImage(image, 0, 0, iwidth, iheight);

ctx.restore();

ctx.globalCompositeOperation = "destination-out";

var gradient = ctx.createLinearGradient(0, 0, 0, iheight / 2);
gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
gradient.addColorStop(0, "rgba(255, 255, 255, 0.5)");

ctx.fillStyle = gradient;
ctx.fill();

    }

    but no path has been set up before that last fill.

    What do you think?

  30. gene Says:
    May 21st, 2009 at 11:57 pm

    there is no way its that smooth on the real iphone.

    is it?

  31. satine.org » Safari 4 CSS Video Effects Says:
    June 4th, 2009 at 7:01 am

    […] may also be interested in my post on CSS CoverFlow, complete with snapping, physics, and perspective correct […]

  32. samsun Says:
    June 15th, 2009 at 1:21 pm

    there is no way its that smooth on the real iphone.

  33. satine.org » Snow Stack is Here Says:
    July 11th, 2009 at 1:41 pm

    […] And yes, this means that WebKit nightly will also do hardware accelerated 3D transforms, just like iPhone Safari. […]

  34. links for 2009-07-13 « Gatunogatuno’s Weblog Says:
    July 13th, 2009 at 1:40 am

    […] satine.org » Building CoverFlow for Safari on iPhone (tags: iphone css development 3d) […]

  35. Adam Says:
    August 6th, 2009 at 8:35 am

    Yes, it is extremely smooth on the iPhone. Well, at least on the iPod touch using OS3. Very cool stuff.

  36. Subhashini Says:
    August 27th, 2009 at 4:01 am

    Hi,

    I like the plugin and have tried it on my iphone. I am in meed to load a single image with the rorating effect. i try to edit your JS but i can’t kindly help me to fix this.

    Thanks

  37. The Five Most Common Arguments for Native iPhone Development « Cloud Four Says:
    September 2nd, 2009 at 2:17 pm

    […] css tools, you can build smooth flowing effects that rival native applications as shown by the cover flow example built in Safari shown in the video […]

  38. Sweepsy Says:
    October 29th, 2009 at 1:33 pm

    i want to rent movies on my iphone but watch them from my pc monitor. it doesnt need to be wireless. i do not have access to itunes at work so if everyhing goes through the iphone, is this possible?

    unlock iphone 3gs

  39. Didier Says:
    January 21st, 2010 at 2:53 am

    Excuse my English :-( Is it possible to place a link to the image center redirriger to a specific page at the click, for replacing the actual Clicking action ?

    thank you very much

  40. The Many Faces Of WebKit | Programmer's Log Says:
    April 29th, 2010 at 12:59 pm

    […] crop for speed an features. In fact the Mac OSX version isn’t top of the tree, it’s the iPhone/iPad version that has been furthest ahead. It got the accelerated compositing of web elements first and could do […]

  41. iphone cases Says:
    May 1st, 2010 at 4:48 pm

    very cool, i will try it out

  42. iPhone Coverflow using Apple’s CSS Visual Effects « Andrew Sellick Says:
    June 30th, 2010 at 4:31 am

    […] out the video below or visit the website for a good […]

  43. sri Says:
    September 4th, 2010 at 11:51 pm

    hi

  44. Dylan White Says:
    October 1st, 2010 at 10:45 am

    the thing that i like most about flicker is the resize feature*,’

  45. Condenser Dryer  Says:
    October 18th, 2010 at 3:24 pm

    i also like the resizing tool of Flickr aside from the easy upload and download interface it provides*,’