“Presentation!” The very word often triggers the reaction, “Oh, not another ODP or PPT!” In school or college, we’ve all prepared presentations for projects, assignments, fête sponsorships and to impress companies during placement interviews. While at work, we’ve all sweated over client presentations, project status presentations, etc. Besides PPTs or ODPs, though, there are many other interesting ways to make a presentation, like using Impress.js to create cool presentations.
Impress.js is a JavaScript library created by developer Bartek Szopka, which takes the power of CSS3 transformations and transitions of objects and images and gives you a rock-solid platform for impressive presentations. It is licensed under the MIT License.
The project can be forked from the project page. This library is compatible with Google Chrome, Safari, Firefox 10 and IE 10. Using it is quite straightforward; the next few steps show how to create a very basic presentation.
First, download impress.js from Github. Then go to raw.github.com/bartaz/impress.js/master/js/impress.js and save it locally.
Now create an HTML page, which will contain your slides. Include impress.js in the HTML (it must be included just before the closing body tag). For example:
<!doctype html> <html> <head> <title>my first presentation using impress.js</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <script type="text/javascript" src="impress.js"></script> </body> </html>
The script tag’s src attribute should locate (the path at which) impress.js is. Ideally, put it in the same directory as the HTML page, so src="impress.js" works.
Now, inside the body tag, create a division with the id "impress", which will contain the slides, so it looks like what follows:
<body> <div id="impress"> </div> </body>
Inside the impress div, you can have multiple slides, each in a separate div, with the class “step slide”. For example:
<body> <div id="impress"> <div > This is my first slide. </div> <div data-x="500" data-y="0"> This is my second slide. </div> </div> </body>
You are now done with the basics. Open the HTML page in a supported browser, and watch the magic. Use the arrow keys to move back and forth.
If you want to check and inform the user when the browser does not support impress.js, create a div with class="no-support-message".
You can also play around with each and every slide’s orientation (when the slide is not active) by changing any of the following properties of a slide div (taken from the cubewebsites.com tutorial):
- data-y, data-x, data-z: These are the x, y and z coordinates of the slide.
- data-scale: Scales your slide by a factor of this value. A data-scale of 5 would be 5 times the original size of your slide.
- data-rotate: Rotates your slide by the specified number of degrees.
- Data-rotate-x, data-rotate-y, data-rotate-z: The number of degrees it should be rotated about the x axis/y axis/z axis in 3D slides.
Resources
Here are some cool presentations based on impress.js:
- http://bartaz.github.com/meetjs/css3d-summit/ from summit.meetjs.pl by @bartaz
- http://johnpolacek.github.com/WhatTheHeckIsResponsiveWebDesign-impressjs/#/title by John Polacek @johnpolacek
- http://extra.12412.org/digibury/#/title by Stephen Fulljames @fulljames
- http://wakame.jp/wiki/materials/20120114_TLUG/#/title by Andreas Kieckens @Metallion98
I saw impress.js before but it is a good starting point to really start making the presentations myself !
And those of you looking for a visual editor for impress.js, check http://hsivaram.com/tech/2012/03/15/preview-impressionist-a-visual-editor-for-impress-js/