After a while I’m back on my blog to post about my small experience with Impress.js

Some time ago I was involved in a hiring process with Amazon AWS and a part of the interview process consists in preparing a 30 minutes presentation on an Amazon service. So what I did is using Impress.js to try to impress them, designing the Amazon AWS logo with impress.js and navigating through it in a cool 3D way.

Sadly this didn’t worked, I didn’t get hired :-), but this post is not about me but is about how cool is Impress.js and all the nice things you can do with it.

The funny part in my presentation was to create some 3D cubes using Impress.js, that part was quite easy and I got some inspiration by this presentation from Le Zhang.

The only difference is that my first cube face is built around the 0 coordinate. This makes creating the other faces and additional cubes way simpler, as they are just simple math operations around the 3 axis.

Another trick to have a good look to how the cube is coming out is to use the first step of the presentation as a “Camera” on your draw. This means that this first slide needs to be moved of almost 30 degrees and put on an higher position compared to your cube front face.

I think that by looking at the simple HTML source of the presentation you will immediately get the idea especially if you already put your hands on Impress.js.

The down side when creating a lot of Cubes is that, as they are marked as “step”, Impress.js will navigate through all the cube faces.
To go over it I then wrote a simple JS script that will override the keyboard press event allowing me to navigate over an array of DIV marked as “real-step” using the anchor navigation already offered by Impress.js.

Following you can see the script I wrote and off course fill free to use/improve/don’t care.