Downloading and configuring impress.js

You can obtain a copy of the impress.js library by downloading from the github page at https://github.com/bartaz/impress.js/. The downloaded .zip file contains an example demo and necessary styles in addition to the impress.js file. Extract the .zip file on to your hard drive and load the index.html on the browser to see impress.js in action. The folder structure of the downloaded .zip file is as given in the following screenshot:

Downloading and configuring impress.js

Configuring impress.js is something you should be able to do quite easily. I'll walk you through the configuration process. First we have to include the impress.js file in the HTML file. It is recommended you load this file as late as possible in your document. Create a basic HTML file called chapter1.html and place the following code:

<!doctype html>
<html lang="en">
    <head>
        <title>impress.js </title>
    </head>
    <body>
 <script src="js/impress.js"></script>
    </body>
</html>

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

We have linked the impress.js file just before the closing body tag to make sure it is loaded after all the elements in our document. Then we need to initialize the impress library to make the presentations work.

We can place the following code after the impress.js file to initialize any existing presentation in the document which is compatible with the impress library:

<script>impress().init();</script>

Since we have done the setup of the impress.js library, we can move on to creating our first impressive presentation.