JavaScript to Impress: Awesome Presentation Framework in CSS3

Back when I TAed for a class on computers and society, I noticed that student presentations were a lot less boring than usual -- in part because many of the undergraduates took advantage of prezi.com's slick animated presentation app, rather than a simple PowerPoint-style slides.

The full-slide panning and zooming transitions possible in a Prezi made poor PowerPoint pale in comparison -- visually, the difference between objects moving in a static frame, and the whole frame moving from one object to another.

So Prezi's are impressive; and developers give presentations too. But, ideally, what developer would want a tool they can't pick apart and code by hand?

So pick apart a prezi with Impress.js, a JavaScript + CSS3 framework by Bartek Szopka that recreates Prezi's functionality, and then some.

In principle the idea is simple: carve up an html page into carefully-defined divs and spans, then transition between divs on JavaScript events. Simple concept (and the JS is quite lightweight), impressive results.

The framework itself can help you develop really cool, vertiginous presentations yourself. But the provided example presentation is created carefully enough that your general typography skills should see some improvement just by paying close attention to the CSS.

For instance, here's the most span-dense html:

    <div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
        <p><span class="have">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it's</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?</p>
        <span class="footnote">* beat that, prezi ;)</span>
    </div>

You can probably guess how that might work, but the (much larger) demo css file will fill in all the details.

Altogether a great way to code amazing presentations in CSS3 (though maybe with a little effort).