Impress at Presentations with Impress.js
By Andi Smith - Tuesday, January 31 2012
(UPDATED for Impress.js v0.3)
The other day I mentioned on Twitter that I was playing around with Bartek Szopka’s Impress.js library to write a presentation and it seemed to gather some interest. I then gave the presentation, and that gathered some more interest; so I thought I would write a short blog post about how to use Impress.js.
For those of you who aren’t aware - Impress.js is a web-based presentation framework which utilises CSS3 transitions and transforms to produce some impressive effects.
Whilst it’s primarily use is for presentations, it can also be used for simple web pages due to it’s HTML/CSS/JavaScript roots. Employing a variety of different CSS animations, your presentations or pages can be brought to life through scrolling, rotating and scaling on a 3D plane. Impress.js works in the latest Chrome and Safari, as well as Firefox 10+ and Internet Explorer 10+.
So how do you use it?
Content, Content, Content
The most important part of the process of producing any presentation is the presentation itself. There is no point making a whizzy presentation if you have nothing to say.
Your slides should still follow the usual important rules of presentations - a block of text really isn’t going to look any better with Impress.js than it is in PowerPoint or Keynote. Instead, keep slides short and to the point so you can expand on them when speaking.
Layout
Once your presentation has been decided, you are almost ready to start using Impress.js. But first, you need to consider how you are going to layout your presentation. Because your Impress.js presentation can move in all directions, rotate in any direction and even move closer or further away from the user, it’s very easy to get in a total mess.
The best way to avoid this mess is to draw out what you want to achieve before you start; and also to keep things simple. Like an overused star wipe, if you change direction and/or rotate to a different angle on every slide your viewer is going to start getting a headache; and so are you making it.
Here’s the layout we’re going to go for in this example.
Now you’ve decided on your presentation and your layout, it’s time to get started with writing the actual code.
Initial Setup
The foundation of any Impress.js presentation is the same as the foundation of any good web page. We start with the usual HTML base (a head, a title and a body tag), and add a <script> element to load in the Impress.js library and a containing element such as a <div> with the id “impress”.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Presentation Name</title>
</head>
<body>
<div id="impress">
<!-- our slides will go here -->
</div>
<script src="library/js/impress.js"></script>
</body>
</html>If you’re using v0.3 or above of Impress you will also need to include the following code after you include the impress.js library:
<script>impress();</script>Slides should be placed within your “impress” container and will appear in the order they appear in your code. Each slide is represented with the class “step”, but they can be created with any block-level element (e.g., <div>, <section>, <header>). You could use the <div> element throughout, but I prefer to create my presentations with the first slide as a header element, subsequent slides as sections and the final slide as a footer as I feel it adds more semantic value. For example:
<div id="impress">
<header class="step">
<h1>Andi's Presentation</h1>
</header>
<section class="step">
<p>Here's something cool on slide 2</p>
</section>
<section class="step">
<p>Here's something also cool on slide 3</p>
</section>
<footer>
<p>Visit me at <a href="http://www.andismith.com" target="_blank">AndiSmith.com</a></p>
</footer>
</div>Positioning our Slides
Now we’ve created some steps, it’s time to refer back to our sketch and position our slides accordingly. Impress.js uses the HTML5 data-* attribute to define the positions of our slides. There are a number of options available, which we will use as we build our slideshow.
Position Options
Slides are positioned relative to the centre of the presentation (0,0), rather than in relation to the previous slide.
Attribute - Description - Default
data-x - Position the centre of the slide on the x axis (horizontal) at the pixel coordinate specified. Use negative values to position to the left. - 0
data-y - Position the centre of the slide on the y axis (vertical) at the pixel coordinate specified. Use negative values to position upwards. - 0
data-z - Position the centre of the slide on the z axis (depth) at the pixel coordinate specified. Use negative values to position away from the screen. - 0
We will keep our first slide at the center of the page, and change our second slide to appear 500 pixels below. To do this, we use the following code:
<section class="step" data-y="600">
<p>Here's something cool on slide 2</p>
</section>Our first slide doesn’t need any values as it will sit at the default position. We only need to specify the data-y value for slide 2 as it is staying at the same x coordinate.
Rotate Options
Attribute - Description - Default
data-rotate or data-rotate-z - Rotate the slide on the z-axis by n degrees. The centre of the slide is the point where rotation occurs. Use negative values to rotate anticlockwise. - 0
data-rotate-x - Rotate the slide on the x-axis by n degrees. The centre of the slide is the point where rotation occurs. Use negative values to rotate toward the user on the horizontal plane. - 0
data-rotate-y - Rotate the slide on the y-axis by n degrees. The centre of the slide is the point where rotation occurs. Use negative values to rotate toward the user on the vertical plane. - 0
For our third slide we are going to make it appear from the left and rotate 180 degrees (so it is upside down) using the following code:
<section class=“step” data-x=“1200” data-y=“600” data-rotate=“180”> <p>Here’s something also cool on slide 3</p> </section>
Scale Options
Attribute - Description - Default
data-scale - Scale the slide to make it bigger (e.g. 4) or smaller (e.g. 0.5). - 1
Our footer isn’t as important as the other slides, so we will shrink this slide by changing the scale to 0.5 (and, of course, moving it so it doesn’t sit in the way of the previous slides).
<footer class="step" data-x="1200" data-scale="0.5">
<p>Visit me at <a href="http://www.andismith.com" target="_blank">AndiSmith.com</a></p>
</footer>Styling our Slides
Styling of slides still occurs in a CSS file, just as it would for a website. As we are only able to support newer browsers for our whizzy effects, and you are likely to have control over what browser your presentation is viewed in (at least initially), you may want to consider whether you drop support for older versions of IE. See HTML5Please for information of what extra functionality you could use.
For our slides, I have the following simple stylesheet:
body {
background: #eee;
font:62.5% helvetica, arial, sans-serif;
margin:0;
padding:0;
}
header, footer, section {
background:#fff;
border:solid 1px #666;
border-radius:12px;
display:block;
height:480px;
width:760px;
}
h1 {
font-size:8em;
margin:0 auto;
}
p {
font-size:4em;
margin:0 auto;
}Active Slides
Sometimes you may find you can see parts of other slides on your screen, and you may wish to hide them - or you may wish to highlight the current slide when it’s the one you are speaking about. Impress.js dynamically adds a class of “active” to your current slide so you can add styles where you need.
.step {
opacity:0.2;
}
.step.active {
opacity: 1;
}Linking to a Slide
If you wish to provide quick route to a particular slide in your deck, adding an ID attribute to the slide will provide a quick link. For example, a slide with an ID of “statistics” will be accessible by appending “#/statistics” to the end of the URL.
The Overview Slide
Creating an overview slide is a pretty useful way of showing the user an entire presentation on one screen. Using this view, the user can navigate quickly to the slide they want. If you’ve created a presentation, this would probably be your last slide for users later reading your deck. If you’ve created something else, it may be your first slide.
The overview slide is built as an empty slide, centered in your presentation with a large data-scale value. This transparent slide will cause Impress.js to pull its view of the page back toward the user giving them a complete overview. As we want the user to be able to see all the slides at this point, we set some additional CSS properties so that they are clearly visible (and give the users a prompt that they can click on them).
<div id="overview" class="step" data-x="600" data-y="300" data-scale="2"></div>.step-overview .step {
opacity: 1;
cursor: pointer;
}The Fallback Message
Creating a fallback message for browsers that do not support Impress.js’ functionality is also straightforward. First, we need to add a class of “impress-not-supported” to our body element. When Impress.js loads the page, it will check if it is supported and remove this class if everything is ok. Next, we need to create a fallback message within our HTML that has a CSS display setting of none, unless it has a parent with a class of “impress-not-supported”.
<div id="impress" class="impress-not-supported">
<div class="fallback-message">
<p>Your browser doesn't support the features required by impress.js, so you
are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest Chrome, Safari, or Firefox
10.</p>
</div>/* set some styles to show the slideshow normally for browsers we cannot
support */
.impress-not-supported .step {
margin: 20px auto;
opacity: 1;
position: relative;
}
.fallback-message {
display: none;
margin: 20px auto;
}
.impress-not-supported .fallback-message {
display: block;
}Get Presenting!
And that’s all there is to it! Now you know you’re presentation doesn’t suck, all you need to work on is your speech skills… Impress.js can’t help you there I’m afraid.
I’ve uploaded the barebones demo presentation for you to check out, or check out Impress.js’ much more impressive presentation - and then have a go yourself!
Andi Smith is a web developer from London, United Kingdom. He likes to build highly performant websites which innovate with genuine value.