No More Powerpoint I Have Impress.js

In this tutorial you will learn how you don’t need to use the old powerpoint presentation software now we have Impress.js.

impress.js

What Is Impress.JS

Impress.js is a presentation framework which uses all the new features of CSS3 transforms and CSS transitions to create unique presentations.

The idea of Impress.js came from viewing new unique presentations from prezi.com.

Lately on Github Impress.js has become very popular and I believe you will start seeing many companies create presentations by using this framework.

Impress.js Demos

The best way to understand what Impress.js can do is to see some of the presentations that have already been created using the framework.

Here is a list of presentations for you to enjoy, they are all much better than using the boring old powerpoint presentations.

Official Impress.js Demo

http://bartaz.github.com/impress.js/

CSS 3D transforms

CSS 3D Transforms

What The Heck Is Responsive Web Design?

Digibury

Wakame

Asynchronous JavaScript

Careers in Free and Open Source Software

Lioshi Toiles

Al INGHAM The debut life of Al Ingham

Nice Shots photography

Using Impress.JS

Now you have seen what you can do with Impress.js lets create our own presentation.

First download the impress.js files from the Github page.

Download

The impress project comes with it’s own CSS files which you can use as default styles for your presentation.

The HTML

Now we have all the files for the impress projects lets create the HTML markup we need for the presentation.

<html lang="en">
<head>
<meta charset="utf-8" />
<title>impress.js Demo</title>
<meta name="description" content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.">
<meta name="author" content="Bartek Szopka" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
<link href="css/impress-demo.css" rel="stylesheet" />
</head>
<body>
<div id="impress" class="impress-not-supported">
<!-- Slides for presentation will go here -->
</div>
<script src="js/impress.js"></script>
</body>
</html>

<head>

<title>impress.js Demo</title>

</head>

<body>

</div>

</body>

</html>

All you have to do to get impress.js working is to include the impress.js file at the end of the document.

Impress works by using div and assigning CSS transition and transforms which happen when moving to the next slide. To assign which divs we use in the presentation they have to be included in a div which has an ID of impress.

It’s best practice to use the class impress-not-supported so that if your browser doesn’t support the CSS transition features impress.js can apply some fallback features to you slides.

<div id="impress" class="impress-not-supported">
<!-- Slides for presentation will go here -->
</div>

</div>

Browser Support

To get the best experience from your presentation you will need to view it in either chrome, safari or Firefox 10 or higher. This is because these browsers support the CSS 3d transitions that are needed by some presentations.

If the visitors browser does not support these CSS3 features then impress.js will know and you can display a message to the visitor.

<div id="impress" 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> or <b>Safari</b> browser. Firefox 10 (to be released soon) will also handle it.</p>
</div>
</div>

<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> or <b>Safari</b> browser. Firefox 10 (to be released soon) will also handle it.</p>

</div>

Impress Slides

Each of the slides in the presentation are div elements all you need to do to use these in your presentation is add a class of step.

<div id="impress" 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> or <b>Safari</b> browser. Firefox 10 (to be released soon) will also handle it.</p>
</div>
<!-- Add Slides To Your Presentation -->
<div id="slide1" class="step">
<h1>Slide 1</h1>
</div>
<div id="slide2" class="step">
<h1>Slide 2</h1>
</div>
<div id="slide3" class="step">
<h1>Slide 3</h1>
</div>
</div>

<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> or <b>Safari</b> browser. Firefox 10 (to be released soon) will also handle it.</p>

</div>

<h1>Slide 1</h1>

</div>

<h1>Slide 2</h1>

</div>

<h1>Slide 3</h1>

</div>

As you can see from the above code we have also add ID’s to each of the slides. This means we can navigate to them in the URL.

To view each slide in the URL all you have to do is add # and then the div ID to the end of the URL. This feature means that you can use impress to create a unique navigation of your site.

Slide Attributes

The way that impress works is by adding a number of different attributes to your div elements. As long as you have a class of step on the div it will be used in your presentation.

The available attributes you can use are:

Class

Add additional styles to your slides by using additional CSS classes.

<div class="step slide">
<h1>Slide</h1>
</div>

<h1>Slide</h1>

</div>

Now the style for the slide.

.slide{
height:400px;
width:500px;
background:#FFF;
border:1px solid #FFF;
}

.slide{

height:400px;

width:500px;

background:#FFF;

border:1px solid #FFF;

}

data-x

Data-x attribute is used to define the position of the slide on the x-axis from the starting point of the presentation. The starting point is always going to be the centre of the entire presentation.

<div class="step" data-x="1000">
<h1>Slide</h1>
</div>

<h1>Slide</h1>

</div>

This will place the slide 1000px to the right of the centre of the presentation.

data-y

Data-y attribute is the same as the data-x attribute but will change the position along the y-axis.

<div class="step" data-y="500">
<h1>Slide</h1>
</div>

<h1>Slide</h1>

</div>

This will place the slide 500px below the centre of the presentation.

data-scale

Data-scale attribute is used to define how large this slide is. Giving a positive number means this slide is larger than default so we need to zoom out to view the entire slide.

<div class="step" data-scale="5">
<h1>Slide</h1>
</div>

<h1>Slide</h1>

</div>

data-rotate

Data-rotate attribute is used to rotate the slide. Giving this a positive number will rotate the div clockwise.

<div class="step" data-rotate="90">
<h1>Slide</h1>
</div>

<h1>Slide</h1>

</div>

data-z

Data-z attribute lets you define the location of the slide along the z-axis. Therefore if you want to show your slide as far away from you put a negative number on the slide. This means that the presentation will zoom in to display the slide.

<div class="step" data-z="-500">
<h1>Slide</h1>
</div>

<h1>Slide</h1>

</div>

data-rotate-x

Data-rotate-x attribute is a CSS 3d transform attribute that allows you to rotate the slide along the x-axis.

<div class="step" data-rotate-x="20">
<h1>Slide</h1>
</div>

<h1>Slide</h1>

</div>

data-rotate-y

Data-rotate-y attribute is another CSS 3D transform attribute that allows you to rotate the slide along the y-axis.

<div class="step" data-rotate-y="60">
<h1>Slide</h1>
</div>

<h1>Slide</h1>

</div>

Using these 8 attributes is all you need to create a unique presentation with impress.js, all you have to do is define these attributes and impress will take care of everything else.

View the demo page to see my presentation using impress.js.

Paulund Impress.js Demo

Full HTML

Here is the full HTML I used to create my presentation.

<html lang="en">
<head>
<meta charset="utf-8" />
<title>impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz</title>
<meta name="description" content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.">
<meta name="author" content="Bartek Szopka" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
<link href="css/impress-demo.css" rel="stylesheet" />
</head>
<body>
<div id="impress" 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> or <b>Safari</b> browser. Firefox 10 (to be released soon) will also handle it.</p>
</div>
<div class="step">
<q>Welcome To Paulund Impress.JS Presentation</q>
<p>Here I'm gonna go through all the effects you can use with Impress.js</p>
</div>
<div class="step" data-x="1500">
<h1>Slide to the right</h1>
</div>
<div class="step" data-x="-1500">
<h1>Slide to the left</h1>
</div>
<div class="step" data-y="1500">
<h1>Slide Down</h1>
</div>
<div class="step" data-y="-1500">
<h1>Slide Up</h1>
</div>
<div class="step" data-scale="5" data-y="-500" data-x="2000">
<h1>Make It Bigger</h1>
</div>
<div class="step" data-scale="15" data-y="500" data-x="-2000">
<h1>Make It Even Bigger</h1>
</div>
<div class="step" data-z="-1000" data-rotate="90" data-y="700" data-x="-5600">
<h1>Spinning It Around</h1>
</div>
<div class="step" data-rotate="180" data-y="200" data-x="-5600">
<h1>Still Spinning</h1>
</div>
<div class="step" data-rotate="270" data-y="300" data-x="-5070">
<h1>Still Spinning</h1>
</div>
<div class="step" data-rotate="360" data-y="800" data-x="-5070">
<h1>Still Spinning</h1>
</div>
<div class="step" data-rotate="0" data-z="10" data-y="800" data-x="-5070">
<h1>Back To Normal</h1>
</div>
<div id="its-in-3d" class="step" data-rotate="20" data-scale="-10" data-rotate-x="20" data-y="800" data-x="770">
<h1><b>Playing With 3D</b></h1>
</div>
<div class="step" data-rotate="20" data-rotate-x="-45" data-rotate-y="15" data-y="600" data-x="770">
<h1>Twist It</h1>
</div>
<div class="step" data-rotate="2000" data-rotate-x="45" data-rotate-y="30" data-y="600" data-x="870">
<h1>woooooooohooooooo!!!!</h1>
<br/><br/>
<small>Dizzy?</small>
</div>
<div id="return" class="step" data-rotate="0" data-y="2000" data-x="2000">
<h2>Return back to the tutorial</h2>
<p><a href="http://www.paulund.co.uk/no-more-powerpoint-i-have-impress-js">Impress.js Tutorial</a></p>
</div>
</div>
<div class="hint">
<p>Use a spacebar or arrow keys to navigate</p>
</div>
<script src="js/impress.js"></script>
</body>
</html>

<head>

<title>impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz</title>

</head>

<body>

<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> or <b>Safari</b> browser. Firefox 10 (to be released soon) will also handle it.</p>

</div>

<q>Welcome To Paulund Impress.JS Presentation</q>

<p>Here I'm gonna go through all the effects you can use with Impress.js</p>

</div>

<h1>Slide to the right</h1>

</div>

<h1>Slide to the left</h1>

</div>

<h1>Slide Down</h1>

</div>

<h1>Slide Up</h1>

</div>

<h1>Make It Bigger</h1>

</div>

<h1>Make It Even Bigger</h1>

</div>

<h1>Spinning It Around</h1>

</div>

<h1>Still Spinning</h1>

</div>

<h1>Still Spinning</h1>

</div>

<h1>Still Spinning</h1>

</div>

<h1>Back To Normal</h1>

</div>

<h1><b>Playing With 3D</b></h1>

</div>

<h1>Twist It</h1>

</div>

<h1>woooooooohooooooo!!!!</h1>

<small>Dizzy?</small>

</div>

<h2>Return back to the tutorial</h2>

<p><a href="http://www.paulund.co.uk/no-more-powerpoint-i-have-impress-js">Impress.js Tutorial</a></p>

</div>

<p>Use a spacebar or arrow keys to navigate</p>

</div>

</body>

</html>

Paulund Impress.js Demo

Conclusion

I hope I’ve given you a good idea of the effects that can be created with impress.js. As you can see from the demo page you can do all types of things with the different slides. You can even see how you can use impress to create an awesome one page website.

I’d love to see what you guys can create with impress. If you have used it please comment below with a link to your site I’d love to see some awesome unique websites using impress.

What Is Impress.JS

Impress.js Demos

Official Impress.js Demo http://bartaz.github.com/impress.js/

CSS 3D transforms

What The Heck Is Responsive Web Design?

Digibury

Wakame

Asynchronous JavaScript

Careers in Free and Open Source Software

Lioshi Toiles

Al INGHAM The debut life of Al Ingham

Nice Shots photography

Using Impress.JS

The HTML

Browser Support

Impress Slides

Slide Attributes

Class

data-x

data-y

data-scale

data-rotate

data-z

data-rotate-x

data-rotate-y

Full HTML

Conclusion

Related posts

Official Impress.js Demo

http://bartaz.github.com/impress.js/