CSS3 3D Slideshow Framework [Chromium 12 or Safari](hakim.se)
hakim.se
CSS3 3D Slideshow Framework [Chromium 12 or Safari]
http://hakim.se/experiments/css3-3d-slideshow
9 comments
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
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
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/
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.
If one is at the bottom of the nested slide you can easily go forth by pressing : "↑ + →". Brilliant.
Very nice job.
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)