“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> |
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> |
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> |
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 onimpress.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
No comments:
Post a Comment