Wednesday, October 6th, 2010
3D Slides Built with HTML5, CSS3, and SVG
Category: 3D, CSS
, HTML
, Presentation
Over on my personal blog I talk about a 3D slide deck I’ve created that uses HTML5, CSS3, and a bit of SVG (video). The main idea behind this deck is to be able to ‘zoom’ into topics to as deep a level as necessary. Slides are nested, like an outline.
For example, I gave a talk at Future of Web Apps recently on HTML5, CSS3, and other web technologies and only had 40 minutes, so I just skimmed the surface of the slides. However, in a few days I’ll be speaking at Fronteers and will be diving deep into SVG and Canvas, so those slides can be zoomed into. The goal is for me to have a universal slide deck that can ‘accordian’ open and closed to fill either a 40 minute session or an all day workshop, kind of like stretchtext.
Read more to learn about the 3D slide deck and how I built it.
vimeo does not like browser flash blockers on purpose. Their player objects also perform poorly in zoomed windows. (Something about cursor position tracking).
For the sake of simplicity, consider YouTube.
@ddotsenko: YouTube has bad encoding for tech videos; they over encode the videos which makes the slides unreadable, so I prefer Vimeo for higher quality content.
very cool