Impressive Slideshow Presentation with Impress.js

Create beautiful slideshow presentation for the web using HTML and CSS without downloading any bulky software. Impress.js, a powerful CSS3 transformation framework, does it for you, it translates your HTML code into beautiful slideshow presentation.

Impress.js is a jQuery plugin created on github by bartez which uses CSS3 functionality to create presentations. All the modern browsers will support the stunning visualizations created by Impress.js.

Download Impress.js by visiting github. Click on the zip button as shown in the following screenshot and Impress.js library will be downloaded with the examples.

Once the download is completed extract the zip folder and you will find sample files used for the Impress.js demo. Since our purpose is learning to use the Impress.js plugin, we should start coding from scratch. First create a basic html document as shown in the code below and include impress.js file.

Basic HTML document with impress.js included


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

Initializing Impress.js

In order to use Impress.js you need to use syntax defined by the library. The plugin searches for an element with the ID impress to create slides of your visualization. So we will create a div with the ID “impress”. Then you can initialize the library using the impress().init() function as shown in the code below.


<html lang="en">
    <head>
        <title>Impress Demo</title>
    </head>
    <body>
        <div id="impress">

        </div>
        <script type="text/javascript">impress().init();</script>
        <script type="text/javascript" src="js/impress.js"></script>
    </body>
</html>

Now we are ready to explore the powerful features of Impress.js. Lets move onto creating slides.

Lets Start Creating Slides

Impress.js powered slides can be anything and any size as long as it matches the criteria defined by the library. I have created 2 simple slides in the following code to get us started on our presentation.


<!doctype html>
<html lang="en">
    <head>
        <link href="css/impress-demo.css" rel="stylesheet" />
        <link rel="shortcut icon" href="favicon.png" />
        <link rel="apple-touch-icon" href="apple-touch-icon.png" />
    </head>
    <body class="impress-not-supported">
        <div class="fallback-message">
            <p>Your browser <b>doesn't support the features required             </b> by impress.js, so you are presented with a                           simplified version of this presentation.</p>
            <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
        </div>
        <div id="impress">
            <div id="start" class="step slide">
                <p style='font-size:40px;text-align:center'>
                     Creating Stunning Visualizations</p>
                <p style='text-align:center'>with Impress.js </p>
            </div>
            <div id="slide2" class="step slide" data-x="1200" data-y="0">
                <p style='width:1000px;font-size:40px;'>
                    this is the first slide</p>
        </div>
    <script>
         if ("ontouchstart" in document.documentElement) {
         document.querySelector(".hint").innerHTML = "<p>Tap on the           left or right to navigate</p>";
         }
    </script>
    <script src="js/impress.js"></script>
    <script>impress().init();</script>
    </body>
</html>

Explaining Slide Creation

  • I have created two DIV elements with ID start and slide2. Those are going to be our first two slides. It’s important use meaningful ID values for the slides.
  • If ID values are not provided, the library will auto include ID values as step-1,step-2 etc.. Once you run the presentation you will be able to see these ID values change on the URL when a slide transition is done.
  • Value of class attribute is the only basic requirement for an element to be identified as a slide. Each of your slides should use the class value as step.
  • In first slide we don’t have to define data-x and data-y values. It will show up in the default browser window with given size.
  • If we specify data-x value that means the center of the slide will be positioned at the data-x value we have provided. Same goes for data-y value. So data-x of -100 and data-y of 300 means that center of the slide will be positioned at (-100px, 300px).
  • In the above example, the second slide will move 1200px to the right of the screen on key press (space bar, tab, arrows)
  • Also I have used some styles for each slide. It’s not mandatory and you can define your own styles as you wish. This example is built for 1024px,768px resolution.
  • So open the HTML file in the specified resolution and press space bar to see the visualization in action.

Effects Supported In Impress.js Library

Currently there are several effects you can use in creating visualizations. If you are a CSS expert you will be able to find unlimited effects using these features supported by the library,

  • data-x– Moves your slide in x-axis left->right or right->left direction depending on the current position.Example: If current x value is 100, data-x=’200′ will move right->left and data-x=’-200′ will move left->right
  • data-y– Moves your slide in y-axis top->bottom or bottom->top direction depending on the current position.Example: If current y value is 100, data-y=’200′ will move bottom->top and data-y=’-200′ will move top->bottom
  • data-z– Moves your slide in z-axis away from screen or towards the screen depending on the current position. Example: If current z value is 100, data-z=’200′ will move away from screen and data-z=’-200′ will move towards the screen.
  • data-scale– Scales your slides in respect to the other slides. Example: If current scale value is 1, data-scale=’4′ will scale the slide 4 times bigger than other slides and data-scale=’-4′ will reduce the scale of the slide to 4 times smaller.
  • data-rotate-x Rotates the slide around x axis by given degrees. Example: data-scale-x=’90′ will rotate the slide 90 degrees clockwise and data-scale-x=’-90′ will rotate the slide 90 degrees counterclockwise.
  • data-rotate-y Rotates the slide around y axis by given degrees. Example: data-scale-y=’90′ will rotate the slide 90 degrees clockwise and data-scale-y=’-90′ will rotate the slide 90 degrees counterclockwise.
  • data-rotate-z Rotates the slide around z axis by given degrees. Example: data-scale-z=’90′ will rotate the slide 90 degrees clockwise and data-scale-z=’-90′ will rotate the slide 90 degrees counterclockwise .data-rotate is equal to data-rotate-z

Now we have learned everything necessary to create a stunning visualization. Lets stop talking and make the visualization using combined impress.js features.

 

Advertisements