Make online presentation with Impress.js

Most of the people, when asked to make a presentation, their first choice would be Microsoft Powerpoint slide. Yeah, it’s quick and easy. However, the limitation is you can only custom the animation and effect as much as they were predefined in the program. Plus, if you want to share your presentation online, audiences have to download the entire file over instead of viewing it in web browser.

Now what if I told you, that you can make an awesome presentation that users can view it in all modern web browsers. You can use CSS3 transformation for your slide transition effect or even create a 3D slide. Ladies and gentlemen, allow me to introduce you to impress.js!

impress.js is a presentation framework that utilize CSS3 transformation effect. You can design and create your slide with some basic HTML and CSS knowledge. No, you don’t have to worry about the layout much. Just follow the framework structure and it will handle the rest. See quick tutorial below

First, create a HTML page for your presentation. Then create a div with id=”impress”. This div will represent your presentation.

<div id="impress"></div>

Now, the slide, you can create a slide by put a new div inside impress div and assign a “step” class to it

<div id="impress">
     <div class="step" data-x="0" data-y="0"> 
          <p>This is my first slide!!</p> 
     </div> 
     <div class="step" data-x="0" data-y="1000"> 
          <p>This is my second slide!!</p> 
     </div> 
</div>

The data-x and data-y attribute is your slide position. Imagine that your presentation is a x-y plain. So our first slide will be placed at the origin and the second slide will be 1000 pixels above the first slide.

Next, include the impress.js file and initialize it.

<script src="js/impress.js"></script>
<script>
     impress().init();
</script>

impress.js will read through all your presentation element and automatically add transition effect between your first and second slide! That’s it your very first presentation is ready!

See below for demo and full tutorial playlist

One final thought, even though impress.js is meant to be used as a presentation framework but I do see the potential to implement the visual effect in the website. For example, I’ve used impress.js (with some modification) for transformation effect between dynamic content.

If you like this article, don’t forget to checkout our Youtube channel and subscribe 🙂

Impress.js: https://github.com/impress/impress.js
Red stapler Channel: https://www.youtube.com/c/RedStapler_channel