There are many different ways to create slides for a presentation on Linux. You can use OpenOffice, LibreOffice or even Microsoft Office (via Wine). Your completed presentation will be either an .odp (OpenDocument format) or .ppt (Powerpoint format) file, which you use via the suites mentioned above (or a viewer app) to give your presentation. Without the right software installed, the presentation can’t be viewed. Wouldn’t it be great if you could create a presentation that runs in a web browser, a presentation built using HTML, Javascript and CSS? Thanks to impress.js, you can!
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:
wget https://github.com/bartaz/impress.js/archive/master.zip
And unzip it:
unzip master.zip
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:
nano demo1.html
Insert the following code into the file, and then save and exit (CTRL-X).
<title>All about impress.js</title>
<link href="css/impress-demo.css" rel="stylesheet">
<div id="impress">
<div class="step slide" data-x="-1000" data-y="-1000">
<b>All about impress.js</b>
<q>impress.js is a powerful CSS and Javascript presentation framework.
</q></div>
<div class="step slide" data-x="0" data-y="0">
<b>All about impress.js</b>
<q>It provides all the libraries and CSS files needed
to create complex and visually inspiring presentations using HTML
</q></div>
<div class="step slide" data-x="1000" data-y="1000">
<b>All about impress.js</b>
<q>Find out more at http://bartaz.github.io/impress.js
</q></div>
</div>
<script src="js/impress.js"></script>
<script>impress().init();</script>
All HTML files are divided into sections which start with an opening tag (e.g. <head>) and close with the same tag but with an added slash (e.g. </head>). Inside the “<head>” section the “<link>” 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 the <body> section, there is a <div> 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 <div> 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:
<div class="step slide" data-x="2000" data-y="3000" data-rotate="90"> <b>All about impress.js</b> <q>Rotation! </q></div>
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:
<div class="step" data-x="5000" data-y="4000" data-rotate="0" data-scale="3"> <q>Zoom, plus this doesn't look like a slide </q></div>
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.
Subscribe to our newsletter!
Our latest tutorials delivered straight to your inbox
Sign up for all newsletters.
By signing up, you agree to our Privacy Policy and European users agree to the data transfer policy. We will not share your data and you can unsubscribe at any time. Subscribe
Gary Sims
Gary has been a technical writer, author and blogger since 2003. He is an expert in open source systems (including Linux), system administration, system security and networking protocols. He also knows several programming languages, as he was previously a software engineer for 10 years. He has a Bachelor of Science in business information systems from a UK University.
Comments (1)