How To Use Impress.Js

Yesterday, I wrote about Impress.js, an awesome JavaScript library for creating online presentations. Since posting online, I’ve had several people ask how exactly to use it, as there’s no set documentation on the actual project page.  This guide will help you get started and allow you to create a simple slideshow, but after completing it please bear in mind that there’s so much more that can be done with it.  The only limit is your creativity!

This tutorial is available for you to view and download on GitHub

Requirements

To see this tutorial in action, please use Google Chrome or Safari (or Firefox 10 or IE10).  Impress.js is not currently compatible with earlier versions of Firefox or Internet Explorer.

Setup

The first thing you want to do is create a new webpage.  Mine’s index.html and within it setup the basic head and body elements.

<!doctype html>
<html>
    <head>
        <title>Impress Tutorial</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>

    </body>
</html>

Add the impress.js file before the end of the body element.  This imports the Impress library into your project

<script type="text/javascript" src="impress.js"></script>

Next we’ll create a wrapper which will contain the slideshow.  This is simply a <div> element with an id of ‘impress’

<div id="impress">

</div>

Creating Slides

Now you’ll see how easy it is to create a new slide in the presentation.  Each slide is a <div> element (within the wrapper) with a class name of ‘step’

<div class="step">
    My first slide
</div>

Whilst that creates a simple slide, things are a lot more fun you start adding data properties to your slides.  Data attributes signify properties of your slide for when it’s NOT the active slide.  The following data properties are available to you:

  • data-x = the x co-ordinate of the slide
  • data-y = the y co-ordinate of the slide
  • data-z = the z co-ordinate of the slide (how far/close it appears to the user)
  • data-scale = scales your slide by a factor of this value.  A data-scale of 5 would be 5 times the original size of your slide
  • data-rotate = rotates your slide by the specified number of degrees
  • data-rotate-x = For 3D slides.  This is the number of degrees it should be rotated about the x-axis.  (Tilt forward/lean back)
  • data-rotate-y = For 3D slides. This is the number of degrees it should be rotated about the y-axis (swing in from the left/right)
  • data-rotate-z = For 3D slides. This is the number of degrees it should be rotated about the z-axis

Data Attributes In Action

The following slide configuration will guide you through each of the data attributes in action.

Let’s start with an initial slide.  This slide has it’s x and y data attributes set to 0, so will appear in the center of the page.

<div class="step" data-x="0" data-y="0">
    This is my first slide
</div>

The second slide will have an x position of 500, but the y position of 0.  This means that it’s going to have to come in 500 pixels across the x-axis (slide left) when it becomes active.

<div class="step" data-x="500" data-y="0">
    This is slide 2
</div>

Easy huh?  The next slide will start with the same x-position as slide 2, but a y position of –400.  This will slide in from the top 400 pixels.

<div class="step" data-x="500" data-y="-400">
    This is slide 3
</div>

Slide 4 uses the scale value to show how a slide can appear to zoom in/out.  It has a scale value of 0.5, meaning that it’s half the size it should be.  When it becomes active the presentation will adjust the scale of ALL the slides by the factor required to make the scale of the active website 1.  What this means in this example is that for this slide to display normally (scale value 1) it will need to be scaled up by a factor of 2 (0.5*2 = 1).  All the other slides will also be scaled up by a factor of two, and become twice the size.

<div class="step" data-x="500" data-y="-800" data-scale="0.5">
    This is slide 4
</div>

The rotate attributes allows you to rotate a slide into view.  Slide 5 is set to rotate by 90 degrees.

<div class="step" data-x="0" data-y="-800" data-rotate="90">
    This is slide 5 and it rotates in.
</div>

Finally, for a 3D transition, you can specify rotate attributes for each dimensional axis (x,y,z).

The x axis is the horizontal axis.  This means that you can make things tilt forwards (positive value) or backwards (negative value).
The y axis is the vertical axis so you can have things swing in from the left (negative value) or right (positive value).
The z axis is the depth axis (the one coming out at you) so rotating things on this would be rotating things up (negative value) and down (positive value).

Combinations

Now that you know all about the data attributes, which is really all you need to animate your slideshow, you can use your imagination to combine these in weird and wonderful ways to create your own style of slideshow.

<div class="step" data-x="-2600" data-y="-800" data-rotate-x="30" data-rotate-y="-60" data-rotate-z="90" data-scale="4">
    This is slide 7 and it has a 3D transition AND a scale.
</div>

Unsupported Browsers

Impress automatically detects whether or not a browser supports it or not, and if it doesn’t then automatically adds a class name called ‘impress-not-supported’ to the wrapper ‘<div>’.  Using some CSS we can show a message to people on browsers which aren’t supported by Impress.

At the start of your <div id=”impress”> add the following:

<div class="no-support-message">
    Your browser doesn't support impress.js.  Try Chrome or Safari.
</div>

Then, create a stylesheet or add this to your existing stylesheet:

.no-support-message { display:none; }
.impress-not-supported .no-support-message { display:block; }

This hides the message by default, but then displays it to browser if the impress-not-supported class is present.

Have fun!

This tutorial covers the fundamentals of using Impress.js to create your very own online presentation.  The entire example is available on Github for you to download and play with.

View on GitHub

  • rohit

    Guys i have been using impress.js for presentation.but as its code based its difficult for others to use

    so here i present beethoven-melody a semi gui impress.js creator

    available for free at

    https://github.com/rohitshetty00/beethoven-melody

  • Pingback: HTML5 웹 프리젠테이션 도구 베스트 3 » Wisedog's Lifelog

  • Pingback: Impress.js教程 - 编程语言综合 - 开发者问答

  • Pingback: IMPRESS.JS 的应用 | Ian's Blog

  • Pingback: Paylaşımlar-15.5.2012 | Emre KAÇAN

  • Sanyam Jain

    Hey Great Article !
    I just wanted to know how to position slides in an easy manner, I mean calculating coordinates of x, y and z is a difficult task !
    Is there any tool, extension I am missing ?

  • Pingback: my web 2.0 trip DS106 assignment 3 | 106 drop in

  • csinco

    I followed these steps using the latest version (0.5.3) and you have to make sure you call impress().init() in script, after you declare the Impress.js file.

    Thanks! Awesome work overall. I’m stoked to muck around. :)

    • Nehmulos

      Thank you very much for that hint!

    • koh

      I could not get this to run…..

      I try adding the impress().init() after calling the impress.js file but it did not work. Could you showed me the html code?

      My code is :

      impress().init()

      What is wrong with the code? the sequence?

      • Jugurtha Hadjar

        Hello,

        You must paste this line:

        impress().init()

        Not just impress().init().

        Paste it after you call the impress.js – i.e after the:

  • Pingback: Impress(.js) an Audience with Your Presentation | Linux-Support.com

  • Pingback: Impress(.js) an Audience with Your Presentation - LINUX For You

  • salvatore

    Hi i need help!
    i want to add an event listener that should trigger a custom function when #step-8 is shown…someone knows how to implement this functionality?
    Thanks.

  • http://broadmac.net Evan

    Kinda wish I’d found this post back in January when I was throwing together my CodeMash talk. I ended up needing to throw it together really fast so used the existing code and building out from there. Presentation went great and I’m pretty happy with the results. Check it out http://emachnic.github.com/rails_dev_windows/

    • Alexander

      to be honest, your slideshow .. it looks terrible, sorry.

    • Alexander

      In the sense that it doesn’t work; I cannot see half the things in there, the other half was jarry. only the last 3-4 sildes were okay.

  • http://blog.webtech11.com/ jacob

    nice tutorial with latest technology, but it’s just working in latest browsers, not in IE8 (i tested in) but it’s really awesome.

    Thanks a lot

  • Pingback: impress.js使用教程 | 齐码代码

  • Pingback: Impress.js is good for your presentations « Try to take over the world

  • jdp

    Nice tutorial, I actually read through the source code and pieced together how to use it. This would have been faster. But it gave me a more thorough understanding of how to use the product.

    I would love to use impress.js in a professional respect for a client of mine, but after building my first presentation, I realized that impress.js slideshow doesn’t work in all browsers. This poses a major cross-browser compatibility issue and therefore I can’t use it to build commercial sites for a professional client of mine.

    If you are just messing around making stuff, then I would say go for it.

    Here is my compiled list of tested browsers.
    Supported Browsers:
    ——————————
    Google Chromium 17.0.963.79 (on Linux Ubuntu 10.04)
    Firefox 10 (on Linux Ubuntu 10.04)
    Firefox 11 (on Linux Ubuntu 10.04)
    Firefox 10.0.1 (on Windows 7)
    Firefox 11 (on Windows 7)
    Google Chrome 17.0.963.79 m (on Windows 7)
    Apple Safari 5.1.4 (on Windows 7)

    Unsupported Browsers:
    ———————————-
    Internet Explorer 8 (version 8.0.6001.19088 on Windows Vista)
    Internet Explorer 9 (version 9.0.8112.16421 on Windows 7)
    Firefox 9.0.1 (on Windows 7)
    Opera 11.61 (on Linux Ubuntu 10.04)
    Opera 11.61 (on Windows 7)

    In closing, impress.js is pretty awesome, however, it is not ready to be used as a professional tool due to the cross-browser compatibility issues. If bartaz narrows the gap and gets his code to work on IE and on Opera then I would say its safe to use for professional purposes… until that time, I’ll be waiting.

  • http://www.uniquestudio.dk Roman Petrenko

    Thanks for this article. Impress.js Rocks!

  • http://vijayrawatsan.wordpress.com Vijay

    Thanks for such a nice tutorial. Will try to use this in my next presentation.

  • Pingback: 在线展示–impress.js使用教程 | VECORPS

  • Ajith

    Awesome work.Im going to use impress.js for my next presentation.
    But i would love to know how to make my topic header like the following one.
    http://bartaz.github.com/meetjs/css3d-summit/#/title

    Thanks a ton. :)

  • http://emilyboyerdesigns.com Emily

    I love this! What file would an art director or designer provide a developer with? Would they have to work hand in hand with the developer in creating transitions they would like produced?

  • http://xioup.com xioup

    Wow, to say that this was exactly what I was looking for would be a gross understatement! Thank you so much for this tutorial, excellent! I’ve bookmarked you for future reference and am going to Tweet your article!

    Thank for this man!

  • Jon

    This is a great tutorial, thanks! I’m new to this and wondering how one would insert a picture(s) into the presentation. I’m just playing with your tutorial right now, so any simple example would be very much appreciated. Thanks.

  • Diogo

    Amazing tool! Is possible to navigate by a menu? I don’t think so, according by javascript provided but well, can exists the possibility… :)

    • Diogo

      Forget this comment, it is possible, defining id names for each presentation div!
      Home
      Contacts

  • Cgr

    hi ,
    thanks for share, it is wonderful. How i add timer for event?

  • Sierra Bravo

    Sorry, my bad…the way I downloaded the files from Github was wrong (the right way appears to be to download a tar/zip of all files at one go and not by using the Save Link As… menu option).

    It works fine now. Thanks!

    s.b.

  • Sierra Bravo

    Hi
    Thanks for the share and for your time.

    Unfortunately, I’m unable to see any slide when I open the index.html in Chrome. All I see is the “Your browser doesn’t…” message and one line each from each slide in the HTML.

    I have put all the three files (index.html, styles.css and impress.js) in a single folder and then opened the index.html file in Chrome. I’m using Ubuntu Natty with Chrome 16.0.xx. I am able to see the Impress demo (from http://bartaz.github.com/) with all effects in Chrome.

    And yes, the tag is right at the bottom of the HTML file, just before the tag.

    TIA for any help.

    s.b.

  • Pingback: impress.js 制作PPT教程 | 情封 – web前端开发的记事本

  • Deepthi

    Hi,i tried this code,total divs are display one place only.what is the problem.

    • Cube Websites

      Hey, if you post a link to your code then I can have a look and see what the issue is.
      If I was to take a stab in the dark I’d say your issue is that you’ve included the Impress.js file at the start of your document, not at the end of the tag

      • Pritesh

        Thanks for the tutorial. Impress is awesome..
        I too had the same problem, but placing the script file at the end did the trick.

        Tell people to add

        in the last step of the tutorial.

  • Jack

    Amazing…! hopefully will make my next presentation much impressive.

  • anonymz

    Hope this would be the first tutorial as Google and I know. Thanks for share.

  • axl

    data-z value is missing from the property list

    • anonymz

      the depth axis is z-axis but he mentions it as x-axis (may be typo) while explaining slide 6

      • Cube Websites

        You’re both right!
        There was a typo towards the bottom of the post, but I’d forgotten to include the data-z in the list of available properties.

        Both things should be fixed now

  • shery

    thanks !..this writing really helpful..you’re right..we have to use more imagination to set the value for each data..i have to spend a lot of time to make sure each page working properly.

  • Pingback: Create an impressive web presentations with Impress.js