CSS3 3D Slideshow Framework [Chromium 12 or Safari] | Hacker News Reader

CSS3 3D Slideshow Framework [Chromium 12 or Safari]

hakim.se

77 pointstzury12 comments

This runs very well on mobile Safari as well. In fact, the frame rate is smoother on my iPhone 3GS than it is on my MacBook Pro.

Edit: After some further testing I noticed that setting any dummy CSS transform boosts transition/animation performance on iOS. For example: -webkit-transform: translate3d(0,0,0)

3d CSS transforms are hardware accelerated on iOS, so they perform significantly better than 2d ones.

Works well on my iPad, too. It even supports a "back swipe" gesture.

Amazing and unexpectedly very inspiring. Thank you.

Looks very nice! Why don't you host the code on github?

Have had that on my to-do list for a long time but it's one of those tasks that keeps getting overshadowed in favor of creating new experiments.

For now, you can fork some of my experiments here: http://jsdo.it/hakim

I unintentionally clicked esc key to fade out at the end of presentation :) It is so fancy that I expected this behavior

I would like to see a cube like thumbnail map with a highlight showing you where you currently are / or perhaps subtly hints at where you can go next. Currently it might qualify as mystery meat navigation; yes I think presentations/slideshows should have the ability to know where its going and or a promised end time.

Very nice! Runs perfect in Chrome Canary (Chrome 12).

Incredible work - thanks for the source

EDIT: For anyone interested, Hakim created a RSS feed for his site about 5 minutes ago: http://hakim.se/rss.xml

This works in Chrome 11 as well (some performance issues aside).

Direct link: http://hakim.se/inc/components/slideshow/

I love the idea behind 'nested slides' , hope to see this implemented elsewhere as well!

If one is at the bottom of the nested slide you can easily go forth by pressing : "↑ + →". Brilliant.

Very nice job.

Reply on news.ycombinator.com