Over a million developers have joined DZone.

JavaScript to Impress: Awesome Presentation Framework in CSS3

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}