impress.js is a powerful CSS and Javascript presentation framework. It provides all the libraries and CSS files needed to create complex and visually inspiring presentations using HTML. But a word of warning before we continue, using impress.js in its raw form is all about creating files using text editors and manually writing the HTML. There is no fancy GUI here, no WYSIWYG. Note: While the tutorial shown here is done on a Linux platform, the steps are the same regardless of the OS platform you are using. Impress.js is a web-based script and is cross platform compatible. To start, download impress.js from github. The simplest way is to run the following command from the command line: And unzip it: Inside the “impress.js-master” folder, there are two sub-folders – CSS and JS, that contain the impress.js CSS and Javascript files respectively. You really don’t need to delve into the Javascript folder, however the CSS folder contains the demo CSS file which you might want to modify for your own presentations. You will also find an example impress.js presentation in the index.html file. Using Nautilus, open the “impress.js-master” folder and double-click on index.html. This will open your default web browser (hopefully, either Firefox or Chrome) and start the presentation.

Here is how to build a simple presentation based on the example CSS file (“css/impress-demo.css”) supplied with impress.js. Create a HTML file using a text editor. You might want to use a text editor like gEdit, or you can create it using nano on the command line like this: Insert the following code into the file, and then save and exit (CTRL-X). All HTML files are divided into sections which start with an opening tag (e.g.) and close with the same tag but with an added slash (e.g.). Inside the “” section the “” tag defines which CSS file should be used (i.e. css/impress-demo.css). As you get more advanced with impress.js, you will need to create your own CSS file. In thesection, there is a

section with the id of “impress.” This is where impress.js expects to find the slides. Each slide is called a “step” and must use the class “step.” In the example above, there are three slides, each marked by a
with the class of “step slide.” Each slide has a data-x and data-y attribute which defines the slides position. The y value remains the same for the three slides, but the x value changes. It starts with -1000 and then moves to 0 and finally 1000. The result is that the slides will move from the left to right as the presentation progresses. By changing the x and y values you can get the slides to transition in any direction you like. At the end of the HTML file are two lines which load the impress.js script and then initialize the impress.js library (e.g. impress().init). To test the file, double-click on demo1.html from within Nautilus.

impress.js transitions can also include rotation. Add this slide to your presentation: The data-rotate attribute tells impress.js to rotate the viewport by 90 degrees during the transition. The value is absolute, so another slide with the value of 90 won’t rotate if the previous slide had a data-rotate of 90. Test the new presentation in your web browser. Another interesting attribute is data-scale (i.e. zoom). This can give your presentation a 3D style by zooming in and out of the canvas as the presentation progresses. To see the zoom effect, add the following slide to your presentation: There are a few things worth noting about this last slide. First it omits the “slide” class. This means that the slide will be presented without the white background as defined in the example CSS file. Second, note the values of data-rotate and data-scale. The data-rotate attribute brings the canvas back to 0 degrees (from the 90 degrees rotation in the previous slide). The data-scale attribute makes impress.js perform a zoom during the transition. To see what it looks like, test the presentation in your browser. Now that you have mastered a few simple slides, try reading through index.html and “css/impress-demo.css” to see how the demo is constructed. The index.html file has copious comments to guide you through the various elements and classes. If you have any questions about the examples given above, please use the comments section below and we will see if we can help.