Book Image

Building Impressive Presentations with impress.js

Book Image

Building Impressive Presentations with impress.js

Overview of this book

Everyone has had to present during their lifetime. We've all spent agonizing hours trying to make those PowerPoint presentations engaging. Well now there is a tool that will make those presentations look like child's play. Impress.js is a powerful library that eases the task of creating presentations with smooth animations without depending on a software tool. You are no longer limited to desktop tools as these presentations run on any supported browser anywhere on the Internet. "Building Impressive Presentations with impress.js" is a quick guide to creating professional presentations using the best aspects of CSS3. It will also guide you through several practical examples which go beyond the conventional slide-based presentations, covering each aspect of the Impress library. From simple presentations to your own personal website this handy practical guide will ensure you get the most out of Impress.JS as quickly as you can. Starting with a simple slide-based presentation we move quickly on adding in sliders, galleries and portfolios to utilize this amazing tool. 3D transitions, rotations, scaling, and transforms are also covered to give your presentations that something extra. The final step is bringing all this together to create a personal website that is viewable on all impress supported browsers. "Building Impressive Presentations with impress.js" gives you the chance to stand out from the competition and engage with audiences in a way you never have before.
Table of Contents (14 chapters)
Building Impressive Presentations with impress.js
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Adding new keys for new events


We can create new functions and assign custom keys to impress presentations by modifying the existing switch statement. Earlier, I mentioned the necessity for having an overview step. We'll just add the letter o as the key for the overview step. The implementation for the overview step keys will look as follows:

case 79:
      var overview_step  = document.getElementById("overview");
      api.goto(overview_step);
      break;

First, we have to find the overview of the presentation using its ID. 79 will be the key code for the letter o. We assume that #overview will be used for the overview step of any presentation. Once we get the element, we can use the goto function to directly traverse to the overview slide.

Now, let's create two new functions to traverse to the first and last slide of the presentation, using the following code snippet:

case 70:
    api.goto(0);
    break;

case 76:
    api.goto(-1);
    break;

In the code given, 70 and 76 will be the key codes...