My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
AboutZflow  
How zflow is built and how to use zflow as a component.
Updated Jul 21, 2009 by charles.ying

What is zflow?

For more details, please see the blog post

Documentation

Include zflow.css, zflow.js, and jQuery in your web page.

Call the JavaScript function zflow(images, selector), where:

  • images is an Array of image URLs to load
  • selector is a jQuery selector string or element to load the images into.

Add a HTML markup block to where you'd like the coverflow origin to be placed and add the zflow, tray and centering CSS classes, for example:

<body class="zflow">
    <div class="centering portrait">
        <div id="tray" class="tray"></div>
    </div>
</body>

How zflow Works

  1. Setup - 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.
  2. 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.
  3. Touch Controller - zflow creates a TouchController object, who's job is to field touch events from Mobile Safari and calculate an appropriate offset. (TBD - Use Safari's absolute page offsets instead of calculating this by hand)
  4. 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.
  5. 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.

Performance Considerations

zflow tries to do very little calculation, and touch as few transforms as possible to avoid redraw. Several techniques are used here, but lacking a proper profiler, most of these speed gains have been through trial and error.

  1. We use the CSS transition timing function to decay the velocity of the tray instead of calculating this by hand. Per frame approaches ended up being unacceptably slow on the iPhone.
  2. We modify the tray's transform instead of each image's 3D transform
  3. We cache the last transform set on each image, and only set the CSS Transform when the transform has changed.
Comment by jhen...@gmail.com, Dec 3, 2009

I love this on the iPhone, but it didn't work on my Google Android. The images load but the touch functionality is not :(

I'm also wondering if Apple are ok with this? (http://en.wikipedia.org/wiki/Cover_Flow)

Any further info on these subjects would be massively appreciated, thanks, James

Comment by gd8...@gmail.com, Jan 19, 2010

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

Comment by roman.pr...@gmail.com, Mar 9, 2010

Hi and thank you for the wonderfull tool! But now i have a question to you and i'll hope you can help me … I tried to modify your tool a bit. In stead of scaling the image while rotating it i would like to change the image to a second one (like a "backside image"). Is it possible to load a second image when the user clicks on an image?

Thank you very much, roman

Comment by googlest...@naquada.de, May 22, 2010

Instead of creating the reflection of the image with javascript: why not reflecting it with the built-in reflection of mobile Safari ?

I added this to the css file and it works like a charm :)

.zflow div.cell img {

position: absolute; /add a white border to the images/ border:2px solid white;
/ let safari handle the image reflection / -webkit-box-reflect:below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.2, transparent), to(black));"
}

Comment by luisbena...@hotmail.com, May 22, 2011

Hey men name of music plis! come on!

Comment by paulo.c...@gmail.com, Jul 29, 2011

I there tremendous plugin, Im also interesting in build in it for Android, but honestly I dont know were to start can you give a something in why does not work?

Comment by aryo....@gmail.com, Aug 7, 2011

It doesn't work in Android below 3.0, because the webkit builds for android have broken 3d css transformations

Comment by mehdi-ha...@live.fr, Jan 2, 2012

Hi, I can't change the images ! :( please help me ! :'(


Sign in to add a comment
Powered by Google Project Hosting