Join the DZone community and get the full member experience.Join For Free
Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
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?
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).
Opinions expressed by DZone contributors are their own.