A Guide to impress.js – Create Amazing Web Standard Presentations

There is no dearth of free and paid presentation tools available today. From the tried and tested PowerPoint to the unique Prezi. There are a number of free, and paid, presentation solutions out there, such as Google Docs, SlideRocket, and Zoho Show, however impress.js is something different. It is not a software for visually creating presentations, rather it is a presentation “framework” that utilizes new browser standards such as CSS3 transforms and transitions to create presentations. If you ever wanted to make unique presentations that ooze with style, impress.js is the tool for you.

Of course since impress.js is no visual design tool, you need to be quite familiar with HTML and CSS in order to make any kind of presentation using it. This also means that your presentations will likely be more unique.

If you have used Prezi, the style of presentations that impress.js enables is quite similar to the ones you can create using Prezi. If you haven’t heard of, or used Prezi, check it out now. There are a number of presentations on the front page that you can view to get an idea. Prezi however, requires the Adobe Flash plug-in and is not a free tool. There is a free tier though that allows you to create only public presentations, and offers 100MB storage. On the other hand, impress.js is free, and open source. You will however, not get any easy visual tool like the Prezi presentation editor.

Now that you are briefly introduced to Prezi and impress.js, lets jump in and see how we can make a presentation using impress.js.

Disclaimer

First of all you need to know that impress.js is not a magic tool. Not even the simplest and easiest to use presentation creation tool is a substitute for presentation skills and creativity. And as the warning in impress.js’s readme says, “impress.js may not help you if you have nothing interesting to say ;)”

So, if you have something to present, and great presentation skills, impress.js is an awesome outlet for your creativity. The author of this article has nothing much to say, and it probably not a great at presenting, so excuse him if he just tries to explain how you can use impress.js as an outlet for your creativity while forgiving the lack of his.

NOTE: You need to be running a recent browser with support for CSS3 3D transforms for impress.js to work. This means the demos in this article will currently not work if you are running Opera (11) or IE (9). CSS 3D Transforms will eventually be supported on these browser as well, and the demos shall work in the future.

Planning your Presentation

Since impress.js is a framework, and not a visual tool, it is important to first plan what you want your presentation to look like, and how it should flow. You will not get constant visual feedback as you play around like you would in a traditional presentation software.

Imagine a large canvas, on which you will place each and every slide of your presentation. Imagine a camera focussed on one slide, and then moving one by one to each slide in the set. That is what an impress.js presentation is like. If you want, take a sheet of paper, and lay our everything as you would like it to be in a rough diagram before you proceed.

Like most presentation tools, an impress.js based presentation has a number of slides. You will need to style each slide and each element within that slide manually using CSS.

This process can be made much easier if you use a good HTML editor. You are free to use the tool of your choice, however we recommend BlueGriffon, a free open source WYSIWYG HTML editor that is based on the Firefox engine. It thus supports the latest standards and shows a very accurate preview it uses the Firefox browser engine itself.

While BlueGriffon has a powerful CSS editor, you can also quickly test CSS using Firefox itself. It includes a Style Editor that lets you change CSS and immediately see the effects that has on your design.

Using a simple syntax you can lay out slides on an infinite canvas, by providing a location in three dimensional space. You can even rotate slides in all three dimensions, and scale slides. Once you provide impress.js with all this information, it will automatically add all the transitions and transformations as the “camera” moves from one slide to another. You can move between slides using the arrow keys, or by pressing Space to advance to the next slide.

Since this is the web, it is always important to consider old browsers that don’t support all the latest features that are required by impress.js. It is important to provide a fallback, and this is well supported by impress.js.

 

 

The impress.js Boilerplate

Let us take the simplest example of an impress.js presentation. It is a single HTML file that contains all your slides. The basic boilerplate code would be as follows:

 1 <html> 2 <head> 3     <title>impress.js presentation</title> 4 </head> 5 <body class = "impress-not-supported" > 6 <div class = "fallback-message" > 7     <p>impress.js not supported</p> 8 </div> 9 <div id = "impress" >10     <div class = "step" > Slide 1 </div>11     <div class = "step" > Slide 2 </div>12 </div>13 <script src = "js/impress.js" > </script>14 <script> impress().init(); </script>15 </body>16 </html>

Let’s take a look at what we’ve done here bit by bit.

• The body has a class of impress-not-supported. When impress.js is initialized, it tests the browser to see if it supports the features needed for impress.js to run. If these features are supported, it will remove this class from the body and add a class of impress-supported. If however the features aren’t supported, impress.js will add this class to the body. By styling your slides based on whether this class is present or not, you can have a nice fallback style in case impress.js isn’t supported. If JavaScript isn’t enabled or supported by the browser, adding this class to the body ensures that the class is present by default.
• The fallback message class is a clever way of displaying some content based on whether impress.js is supported or not. In case it is supported, you can provide a CSS style that hides this element. For example:

   1 .impress-supported .fallback-message { 2   display:none; 3 }

• Next we have a div element with an id of impress which serves as a base for our deck of slides. This div — or any other element actually, as long as it has an id of impress — will contain all the slides in our presentation, with each slide in an individual div.
• Each slide is a div with a class of step. You can add additional classes though.

Building an impress.js Presentation

Now that we have the basic framework in palace, let us first test the above code as is. You will notice that both the slides will appear to be superimposed. This is because we haven’t told impress.js how to position them. Also the fallback message is always shown. We can easily be remedied by adding the CSS code for that as mentioned above.

Laying out the Slides

Now let’s change the placement of these slides just a little bit so we can actually see some action. We will move the second slide 1000 pixels to the right, so that we can see some movement between the slides. This is quite easily accomplished by adding the attribute data-x="1000" to the second slide. So the second slide’s code should look as follows:

 1 <div class = "step" data-x = "1000" > Slide 2 </div>

If you test it now, you will see that when you press the right / left buttons you can move between the slides and the camera pans to the next slide. If you wanted the next slide to be below the first one, you could easily change that data-x to data-y and achieve that affect. In fact you can add both to move diagonally.

Before we move ahead, let’s just add a border around the slides to make them more distinct. For this we add the following CSS code:

 1 .step { 2   width: 400px; 3   height: 500px; 4   padding: 20px; 5   margin: 10px; 6   border: 4px solid black; 7 }

This little bit of CSS code is specifying the basic look of a slide in our presentation. We are giving slides a width of 400 pixels, and a height of 300 pixels. This gives them an aspect ratio of 4:3, the same as a PowerPoint slide. This is a little small, but that is on purpose, so that we can fit the slides in this article. Each slide is given an ugly black solid border of 4 pixels in width, with a padding of 20 pixels and a margin of 10. Nothing pretty, but it’ll do.

 

 

Going Three-Dimensional

Now to show you some of the powerful stuff that you can do with impress.js, lets move the second slide not only a 1000 pixels to the right, but also push it 2000 pixels ahead of the screen. We can do this simply by adding a data-z="2000" attribute to div for the second slide. Test it now and see a cool effect of a camera moving backwards to reveal the second slide.

As you can see, all you needed to provide was the positions of the slides in three dimensional space, and impress.js manages the rest! This way you can give a sense of motion to along your presentation without worrying about all the repetitive coding, and the need to make major changes just to test something slightly different. It is still using CSS properties to achieve these effects, but you need not bother unless there is something you explicitly want.

Rotating Slides

Lets add another component, rotation. We will rotate the second slide in 3D, and see the effect that results. We will pull the second slide a little closer in, reducing the z distance to 1000 and we will rotate it -90 degrees along the y axis. For this we need to add a data attribute called data-rotate-y="-90" What you get is as follows:

Just as we have data-rotate-y, we have data-rotate-x, and data-rotate-z, each of which rotate around their respective axis. There is also a simple data-rotate that performs the usual normal 2D rotation around the z-axis.

 

 

Scaling Slides

There is one more data attribute that you should be aware of, and that is scale. As you can expect, data-scale affects the scale of the contents in a slide. We will now place the second slide and first slide on top of each other, but scale up the first slide by a factor of 20. This way, the second slide will just be a small blimp at the center of the first slide, and when you switch between them, impress.js will zoom in or out to bring the slide in view. This is as simple as adding a data-scale="20" to the first slide — and removing the data attributes of the second slide of course. Here you can see it in action:

This can be quite useful in a presentation. Imagine if you have a slide listing multiple points, you could have the each point be a slide in itself, so the presentation zooms into each one by one.

Styling Slides

Till now we have taken a rather bland example, with just two slides that are rather dull. So how can you jazz things up in a real presentation.

That is actually quite simple. What you are creating is a web page that is our entire presentation. There is no reason why you can’t use the standard CSS styling for elements within a slide. You can easily use CSS to style each slide individually or to define a theme for your slides. impress.js will just enhance that and turn it into a working presentation.

Let us style a slide just for demonstration purposes. First we replace the contents of the second slide with the following:

 1 <h2> impress.js is awesome!</h2> 2 <p> It can do a number of awesome things, such as: </p> 3 <ul> 4 <li>This thing</li> 5 <li>That thing</li> 6 <li>Another thing</li> 7 <li>One more thing</li> 8 </ul>

And then we add the following to the stylesheet:

 1 .step { 2   font-size: 1.2em; 3   line-height: 1.4em; 4 } 5  6 .step h2 { 7   text-shadow: 4px 4px 3px #999999; 8   font-size: 1.8em; 9   line-height:1.9em;10 }11 12 .step ul {13   list-style-type: square;14   font-size: 1.4em;15   text-align: left;16   line-height: 1.5em;17   list-style-position: inside;18 }

Here it is in action, switch to the second slide — by pressing space or right to see it in action.

Certainly not the sexiest slide ever, but its just to make a point. Which is that you can style these slides with the full flexibility that CSS affords. In fact you can give each slide a unique id or add additional CSS classes to the slides to control their styling.

 

 

Animating Slide Contents

So now we’ve seen some interesting transitions between slides, but the slides themselves are static. Wouldn’t it be nice if you could have some of those PowerPoint-like animation within the slides; where things pop in left right and center.

The good news is, impress.js makes this easy to achieve as well. We will use standard CSS transitions to perform these animations so you don’t even need JavaScript to perform them.

What impress.js does when it is initialized and as you move between slides is, that it adds the class present to any slide that is currently being displayed. It adds the class past to all slides that lie before the current slide; and it adds the class future to slides that have yet to come. You can use this fact to do nifty things such as hiding all future or past slides, or animating the contents of a slide when it becomes the “present” slide.

So when you move forward from Slide 3 to Slide 4, the future class will be removed from Slide 4, and the present class will be added. Similarly the present class will be removed from Slide 3, and the past class will be added. You can use this knowledge to transition / animate between these states. You can apply a different set of CSS classes to the future state and different ones in the present state and add a transition class as well, so moving between the slides will trigger the animation.

In the second slide as it stands now, we have four points, how would it be if these were to fly in from the left? Lets see what we need to do to achieve this. First of all, they need to be placed to the left of the slide.

To do this will will apply a CSS transform to them by default, transform: translate(-300px); should do it. This will move these bullet points 300 pixels to the left and off the stage. We will also add a CSS transition property transition: all 1s ease-in 0s;. This specifies an animation duration of 1s applied on all CSS properties, a delay of 0 second with an ease-in timing function. Since both CSS Transforms and Transition are rather new standards, it is important to add them with all browser prefixed. It should look as follows:

 1 .step ul { 2   list-style-type: square; 3   font-size: 1.4em; 4   text-align: left; 5   line-height: 1.5em; 6   list-style-position: inside; 7   transform: translateX(-300px); 8   -moz-transform: translateX(-300px); 9   -ms-transform: translateX(-300px);10   -o-transform: translateX(-300px);11   -webkit-transform: translateX(-300px);12   transition: all 1s ease-in 0s ;13   -moz-transition: all 1s ease-in 0s ;14   -ms-transition: all 1s ease-in 0s ;15   -o-transition: all 1s ease-in 0s ;16   -webkit-transition: all 1s ease-in 0s ;17 }

This is before the slide isn’t the current slide. For when it becomes the current slide we need to add the following:

 1 .step.present ul { 2   transform: translateX(0px); 3   -moz-transform: translateX(0px); 4   -ms-transform: translateX(0px); 5   -o-transform: translateX(0px); 6   -webkit-transform: translateX(0px); 7 }

>

That’s it! Run this and you will get the following:

One minor adjustment can make this much better. We can add overflow: hidden; to the step class so that the bullet points don’t appear until they enter the slide. Here is how that would look:

If you wanted to individually animate each element in this list, that isn’t difficult either. It just require some more CSS coding. We won’t explain how that’s done — you can look at the code and figure it out — but here is what that might look like:

Conclusion

The impress.js framework is a powerful way of creating presentations that are unique, but it can also be a little overwhelming, especially considering that it requires manual coding.

The framework is powerful enough to allow even the traditional type of presentation — hint, hide future and past slides, apply transitions and keep them all in the same place — but you are probably better off using a regular presentation tool for those.

impress.js is for those who would like to show off their presentation skills, their web development knowledge and their love for open web standards all at once.

You can download the framework from GitHub, and can see an impressive demo of its features there as well.