28 comments

[ 4.6 ms ] story [ 67.2 ms ] thread
Great looking effect, but horribly slow and ultimately unuse-able. Web browsers are in dire need of some native GPU support.
its actually really smooth for me.
I'm using Chrome 13 on an iMac with 8 GB of Ram + Core i5. Pretty laggy here. Safari feels "smoother" though
hah, thats funny. literally the exact same setup for me. Im on lion, for what thats worth.
Safari and Chrome do support hardware acceleration for 3D CSS transforms.
Runs great on a run of the mill >2 year old PC w/ Windows 7 and Chrome 12. I'm sure YMMV depending upon quite a few factors, but I was actually surprised how nice and smooth it was for me.
If you are using Chrome, go to chrome://gpu-internals/ and make sure that hardware accelerated compositing is enabled.

GPU support is still disabled on many configurations, you can enforce it by starting Chrome with '--ignore-gpu-blacklist' option.

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...

thanks benatkin :)
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.
Just curious, are we calling anchors hashtags now?
I didn't mean anchor; that's an implementation detail. If it were JavaScript it could just grab it from the location and no anchor anchor tag (as opposed to external link anchor tag) would be needed. I meant fragment identifier. http://en.wikipedia.org/wiki/Fragment_identifier Hash tag is just quicker to say.
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.
"Working" is a bit of stretch. Super sluggish for me on an i5 MBP in both Chrome and Safari.
Appears sluggish on Firefox too.
It's not sluggish on my Core2 Duo using Chrome 13 on Ubuntu.
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.

Works for me! Very slick.

Core 2, Chrome 13, Ubuntu.

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.

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.

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

  .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?
I can confirm it doesn't work in IE9 mobile.
very impressive...though its needs to improve on performance. Nice attempt. Auto slideshow by default would be good.
I'd be happy to use my mouse or arrow keys.