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 to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.


Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

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


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

{{ parent.tldr }}

{{ parent.urlSource.name }}