impress.js - An Impressive HTML5 Presentaton Tool

I know that impress.js is a very old-fashioned tool for some, but since I'm not some cutting edge expert, I learned it today, and find it quite interesting.

What is impress.js?

impress.js is a Javascript file written by Bartek Szopka, which serves as a tool for HTML-based presentations. 

To have a better understanding, please have a look:

http://bartaz.github.io/impress.js/

Really impressive, isn't it? It looks like a Prezi presentation (see http://prezi.com/) but as it says, it's in 3d! So if you are patient enough, you can create presentations that can beat Prezi!

A Brief Introduction to Beating Prezi

But impress.js is not so easy. First, you need to have some knowledge of HTML5, CSS3, and Javascript to create you own slides. Second, although it is not hard to understand the code, it requires hard effort and great designs to fully utilize its potential.

Determining the Position of the Slide

impress.js uses data-x, data-y, and data-z to determine where the slide would be. Note that the unit is counted in pixels, and you can use arbitrarily any integer you like (just, don't get too big!) for the position of the screen is adjusted automaticly. But how can I zoom in or zoom out?

Zooming by using data-scale

The data-scale is originally used when you need to make some texts bigger or smaller, but you can also use data-scale to zoom in or zoom out. This is shown in the following piece of code:

In this piece of code, data-scale is set to 10, so the canvas is 10 times bigger(which means other elements look 10 times smaller, remember that), a good viewpoint isn't it!

Overview the code using data-scale

Other Features

If you want to know more, just download the code:

https://github.com/bartaz/impress.js/

The comments will explain more, and I think its far better than my explanaitons.

My First Trial

I intended to make a very simple self-intro presentation using this newly learnt impress.js.

Here are the effects(Note that this is only an overview, the useful information was actually inside the asterisk on the upper right!)

Nice to meet you!

Hope you will enjoy it!

Some Problems

There are still some problems though, namely, it is very difficult to decide the position of the elements, make everything look pretty, and you have to design you own .css file to make you slides. I think I will try to come up with a solution later.

Also the rotation is a bit strange. In the asterisk I went like this 0 -> -18 -> 54 -> 126 -> 198 -> 270 -> 360 -> 0, but it turns around when it goes from 360 -> 0! Any ideas? Thanks!