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 powerpoint slides (read death by powerpoint). 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, clockwise or counterclockwise 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 need 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 the horizontal axis
data-rotate-y: Defines the rotation of the slide in the vertical axis
data-rotate-z or data-rotate: Defines the rotation of the slide in the z-axis
Scale
data-scale: Defines the scale of the slide
Impress.js uses these attributes to define CSS3 transformations such as translate, translate3d, Rotate X, Rotate Y, rotate and scale. These transformations are applied to the divide as elements style attribute.
Given below is the definition of a slide and it runtime 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 the 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 it's 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
