I was pretty amazed when I first saw Impress.js. It’s ability to take a very simple html page and use transformations to create a presentation phenomenal. This plays right in to the hands of developers who want to create something snazzy, but do not have the video experience to do so. It is also probably worth noting that it has likely been done before, but this is the first I’ve seen (I didn’t do much research on it, I was happy with what I saw).

Its process is simple, line up multiple container elements inside a container with id=”impress”, and supply those elements with a variety of data coordinates and scaling attributes, resulting in something like:


<div id="block1" class="step" data-x="1000" data-y="1500" data-rotate="90" data-scale="2">
    <p>This is a test</p>
</div>

Impress will take the coordinates and scale and place them on your canvas. You can also apply 3D effects too using the z for the 3rd dimension and rotate on the x and y axis:


<div class="block2" data-x="1500" data-y="2000" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
    <p>This is a test</p>
</div>

Thats all, just line up these different containers in order and Impress does the rest. Style them up a little and you have a snazzy presentation! I will leave you with simple demo I came up with for CarBounce.com