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.


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


CSS 3D transforms

CSS 3D Transforms

What The Heck Is Responsive Web Design?

What The Heck Is Responsive Web Design?
What The Heck Is Responsive Web Design?


12412 | Digibury



Asynchronous JavaScript

Asynchronous JavaScript
Asynchronous JavaScript

Careers in Free and Open Source Software

Careers in Free and Open Source Software
Careers in Free and Open Source Software

Lioshi Toiles

lioshi toiles
Lioshi Toiles

Al INGHAM The debut life of Al Ingham

Al INGHAM The debut life of Al Ingham
Al INGHAM The debut life of Al Ingham

Nice Shots photography

Nice Shots photography - Portfolio der Fotografien von Jochen Groh
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.


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


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

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.

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.

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.

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:


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

Now the style for the slide.


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.

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


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

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


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.


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


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.


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


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

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


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

Paulund Impress.js Demo


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.


Leave a reply