“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.
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:
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
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
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.
Here are some cool presentations based on
- 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