Sunday, December 16, 2012

Impressed with Impress.js


Impress.js is a small open source javascript library that we had used to create our "Why Kinship" presentation available on our site. Impress.js uses the power HTML and CSS3 to create stunning presentations that would the give the likes Prezi a run for its money.

We have always been fascinated by the power of Prezi presentations. It was a great relief from the world of boring power point slides (read death by power point). Prezi enabled your slides to come into life with zoom-in or zoom-out transitions that can augment the core idea that your slides are conveying. Using the Prezi designer tool one can layout the slides on an infinite canvas and it allowed all the transitions to be visually designed too.  In short, Prezi was damn cool but that was until Impress.js happened.


Impress.js transforms simple HTML elements into slides and it allows you to impart slide transitions such a zoom-in / zoom-out actions, clock wise or counter clock wise rotation and even 3D effects. Impress.js does not depend on any styles sheet, the styling of the slides is done using CSS which gives you complete freedom in making your slides look stunning.

The elements that define your slides needs to be placed inside a wrapper div with id="impress". Each of the slide element has to have a CSS class named "step" so that the script can identify the div elements as a slide and can be rendered accordingly. The order of the slide is defined by the order in which the div elements are placed inside the HTML file. Impress.js uses some custom attributes to control the placement, magnification and transition of the slides. These attributes are as given below


Positioning
data-x : Defines the position of the center of the slide on the horizontal or x axis of the canvas
data-y : Defines the position of the center of the slide on the vertical  or y axis of the canvas
data-z:  Defines the position the slide on the z axis of the canvas or its depth (yes, it is 3D)

Rotation
data-rotate-x: Defines the rotation of the slide in horizontal axis
data-rotate-y: Defines the rotation of the slide in vertical axis
data-rotate-z or data-rotate: Defines the rotation of the slide in z-axis

Scale
data-scale: Defines the scale of the slide

Impress.js uses these attributes to define CSS3 transformations such as translate, translate3d, rotateX, rotateY, rotateZ and scale. These transformations are applied to the div as elements style attribute.
Given below is the definition of a slide and it run time style

 Defenition:
<div class="step" data-rotate="270" data-scale="6" data-x="3500" data-y="-850" id="ing" > .... </div >

Run Time (on Firefox):

<div class="step active present    " data-rotate="270" data-scale="6" data-x="3500" data-y="-850" id="ing" style="position: absolute; transform-style: preserve-3d; transform: translate(-50%, -50%) translate3d(3500px, -850px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(270deg) scale(6);" > </div > 
 
If you are not familiar with HTML, CSS3 or if design is not your cup of tea you would not get much out Impress.js. That said, hope is not all lost as there are some open source Impress.js presentation designers on the way. Impressionist is one such design tool that will enable you to visually design your presentations. It is  in its early stages but its still quite impressive. You can get a preview of its capabilities from this blog.

We encourage you to try it out, get those creative juice flowing and create some stunning presentations.


Finahub Team