Impress.js – awesome script for awesome presentation

There are lots of cool CV around internet. Some are really impressive. I was thinking to make some impressive CV. After a little search I got impress.js. Its really impressive. Actually it is used for making presentation. Why can’t we use it for CV? So I made my own.

Let’s see how impressive is that impress.js.

Check out my CV created with impress.js – http://shuvankar.com/cv

Looking awesome??? 😉 . Now let me share some technical aspects.
Basically what is impress.js?

“It’s a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.”
– @bartaz

Get Impress.js from https://github.com/bartaz/impress.js (Fork it or download ZIP)

You can find tutorials of it inside index.html as comment. Open index.html (sourcecode) in any text editor. Lets see what you can do with that powerful script.

Mostly the effects are created by CSS3 and for every transition/transformation there are corroesponding css selectors available. Just use it in your div and enjoy. Lets see some examples.
There is impress-demo.css for the default design. You can make your own customized version.

In the default design id=”title” is used for initial big text (h1). It can be used for title of your presentation. I have used it for showing my name as a first slide.
For each slide you can use class=”step” in every id.

You can treat your browser as a 3d canvas and can place your text in any location in 3 dimention are. For placing element in 3d plane use data-x, data-y, data-z (e.g. data-x=”-3000″ data-y=”500″)

For rotating animation there is data-rotate (e.g. data-rotate=”90″. It will spin the text 90 degree clock wise. Use negative sign for anticlock rotation. e.g – data-rotate=”-270″

For different size of the text there is data-scale element (e.g. data-scale=”3″).

Even you can rotate your div in 3 dimentional area. Use data-rotate-x, data-rotate-y, data-rotate-z for that (e.g. data-rotate-x=”-40″ data-rotate-y=”10″)

This is very basic things can be done with impressjs (I have used only these to create my cv) but there are lots of thing you can do with it. Just open your imagination, use awseome css transformation properties and be awesome 🙂

There is a presentation regarding css3d transforms Bartek Szopka (@bartaz)- developer of impress.js
http://bartaz.github.io/meetjs/css3d-summit
Default demo is available at – http://bartaz.github.io/impress.js
Don’t forget to check my cv created using it – http://shuvankar.com/cv