Over a million developers have joined DZone.

JavaScript to Impress: Awesome Presentation Framework in CSS3

DZone's Guide to

JavaScript to Impress: Awesome Presentation Framework in CSS3

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

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>

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

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}