
Pure CSS3 coverflow effect. No javascript. Working on Chrome, FF and Safari. - Spx
http://sandropaganotti.com/wp-content/goodies/demos/cards/index.html#aela
======
ronaldj
"Working" is a bit of stretch. Super sluggish for me on an i5 MBP in both
Chrome and Safari.

~~~
Joakal
Appears sluggish on Firefox too.

------
charlesju
Great looking effect, but horribly slow and ultimately unuse-able. Web
browsers are in dire need of some native GPU support.

~~~
cleverjake
its actually really smooth for me.

~~~
pugnusferreus
I'm using Chrome 13 on an iMac with 8 GB of Ram + Core i5. Pretty laggy here.
Safari feels "smoother" though

~~~
cleverjake
hah, thats funny. literally the exact same setup for me. Im on lion, for what
thats worth.

------
2bit
See also ZFlow for a JavaScript Coverflow: <http://code.google.com/p/css-
vfx/wiki/AboutZflow>

Demo: <http://css-vfx.googlecode.com/svn/trunk/examples/zflow.html>

------
benatkin
I love the hash tag support. Nice work!

Edit: here's an example of linking directly to one of them:
[http://sandropaganotti.com/wp-
content/goodies/demos/cards/in...](http://sandropaganotti.com/wp-
content/goodies/demos/cards/index.html#raguel)

~~~
joejohnson
The downside to that is that if you click through all of the images, pressing
back in your browser won't take you to the previous page; instead you have to
press back many times, cycling back through all the images, until you
eventually are taken back to your previous page.

~~~
benatkin
That's what replaceState() is for.
[https://developer.mozilla.org/en/DOM/Manipulating_the_browse...](https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history)

~~~
Joakal
Then the page will require JS to be enabled.

------
libria

      .card:target + .card + .card + .card + .card + .card + 
          .card + .card + .card + .card + .card{
        z-index: 1;
      }
    

Could this be rewritten (with less stacking) using assigned/referenced id's
for each image?

------
palish
Hey, nice work. It looks pretty cool.

It would be great if somehow you could click on the cards to switch between
them. Forcing people to click on the dots at the bottom == very unintuitive.

~~~
HN_Addict
Side-scrolling would be even better. That's the mechanism that I use for
normal cover flow interaction, and that's what I expected this to work with.

Of course, if you don't have an input device that makes it easy to side-scroll
(like a mouse with a vertical-only wheel) this doesn't make a whole lot of
sense. Buttons at the side, response to right/left arrow keys, or a horizontal
scroll bar would make a good backup for users without a trackpad.

Clicking on the cards would also be a welcome mechanism, but I imagine it
would be used to jump to a specific card, rather than to go through one-by-
one.

------
timewasted
It seems to work fine on the default Android browser (running 3.2 on a
tablet). Looks great, too! Would be awesome if it worked on Opera as well.

------
jamesgagan
I'm using chrome and it hijacked my back and forward buttons. Is that
intentional? edit: nevermind - just saw comment by joejohnson below

------
Jarred
I can confirm it doesn't work in IE9 mobile.

------
laconian
Works for me! Very slick.

Core 2, Chrome 13, Ubuntu.

------
AltIvan
There is one exact position in Google Chrome where it get stuck for half a
second.

I think it happens when the card gets inverted horizontally.

------
Kwpolska
I'd be happy to use my mouse or arrow keys.

