8 ms·

Pure CSS3 coverflow effect. No javascript. Working on Chrome, FF and Safari.

24 points by Spx 15y ago

charlesju 15y ago
Great looking effect, but horribly slow and ultimately unuse-able. Web browsers are in dire need of some native GPU support.
- cleverjake 15y ago
  its actually really smooth for me.
  - pugnusferreus 15y ago
    I'm using Chrome 13 on an iMac with 8 GB of Ram + Core i5. Pretty laggy here. Safari feels "smoother" though
    - cleverjake 15y ago
      hah, thats funny. literally the exact same setup for me. Im on lion, for what thats worth.
- lazerwalker 15y ago
  Safari and Chrome do support hardware acceleration for 3D CSS transforms.
- georgemcbay 15y ago
  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.
- jarek-foksa 15y ago
  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.
benatkin 15y ago
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/index.html#raguel http://sandropaganotti.com/wp-content/goodies/demos/cards/in...
- Spx 15y ago
  thanks benatkin :)
- joejohnson 15y ago
  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 15y ago
    That's what replaceState() is for. https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history https://developer.mozilla.org/en/DOM/Manipulating_the_browse...
    - Joakal 15y ago
      Then the page will require JS to be enabled.
- MisterMerkin 15y ago
  Just curious, are we calling anchors hashtags now?
  - benatkin 15y ago
    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 http://en.wikipedia.org/wiki/Fragment_identifier Hash tag is just quicker to say.
2bit 15y ago
See also ZFlow for a JavaScript Coverflow: http://code.google.com/p/css-vfx/wiki/AboutZflow http://code.google.com/p/css-vfx/wiki/AboutZflow Demo: http://css-vfx.googlecode.com/svn/trunk/examples/zflow.html http://css-vfx.googlecode.com/svn/trunk/examples/zflow.html
timewasted 15y ago
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.
ronaldj 15y ago
"Working" is a bit of stretch. Super sluggish for me on an i5 MBP in both Chrome and Safari.
- Joakal 15y ago
  Appears sluggish on Firefox too.
- ingenium 15y ago
  It's not sluggish on my Core2 Duo using Chrome 13 on Ubuntu.
AltIvan 15y ago
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.
laconian 15y ago
Works for me! Very slick. Core 2, Chrome 13, Ubuntu.
palish 15y ago
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 15y ago
  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.
jamesgagan 15y ago
I'm using chrome and it hijacked my back and forward buttons. Is that intentional? edit: nevermind - just saw comment by joejohnson below
libria 15y ago
.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?
Jarred 15y ago
I can confirm it doesn't work in IE9 mobile.
sushumna 15y ago
very impressive...though its needs to improve on performance. Nice attempt. Auto slideshow by default would be good.
Kwpolska 15y ago
I'd be happy to use my mouse or arrow keys.

24 points by Spx 15y ago

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

cleverjake 15y ago
its actually really smooth for me.
- pugnusferreus 15y ago
  I'm using Chrome 13 on an iMac with 8 GB of Ram + Core i5. Pretty laggy here. Safari feels "smoother" though
  - cleverjake 15y ago
    hah, thats funny. literally the exact same setup for me. Im on lion, for what thats worth.
lazerwalker 15y ago
Safari and Chrome do support hardware acceleration for 3D CSS transforms.
georgemcbay 15y ago
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.
jarek-foksa 15y ago
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.

benatkin 15y ago

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/index.html#raguel http://sandropaganotti.com/wp-content/goodies/demos/cards/in...

Spx 15y ago
thanks benatkin :)
joejohnson 15y ago
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 15y ago
  That's what replaceState() is for. https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history https://developer.mozilla.org/en/DOM/Manipulating_the_browse...
  - Joakal 15y ago
    Then the page will require JS to be enabled.
MisterMerkin 15y ago
Just curious, are we calling anchors hashtags now?
- benatkin 15y ago
  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 http://en.wikipedia.org/wiki/Fragment_identifier Hash tag is just quicker to say.

2bit 15y ago

See also ZFlow for a JavaScript Coverflow: http://code.google.com/p/css-vfx/wiki/AboutZflow http://code.google.com/p/css-vfx/wiki/AboutZflow Demo: http://css-vfx.googlecode.com/svn/trunk/examples/zflow.html http://css-vfx.googlecode.com/svn/trunk/examples/zflow.html

timewasted 15y ago

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.

ronaldj 15y ago

"Working" is a bit of stretch. Super sluggish for me on an i5 MBP in both Chrome and Safari.

Joakal 15y ago
Appears sluggish on Firefox too.
ingenium 15y ago
It's not sluggish on my Core2 Duo using Chrome 13 on Ubuntu.

AltIvan 15y ago

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.

laconian 15y ago

Works for me! Very slick. Core 2, Chrome 13, Ubuntu.

palish 15y ago

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 15y ago
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.

jamesgagan 15y ago

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

libria 15y ago

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

Jarred 15y ago

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

sushumna 15y ago

very impressive...though its needs to improve on performance. Nice attempt. Auto slideshow by default would be good.

Kwpolska 15y ago

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