Browser optimize

Get to know the Impress.js presentation tool

Ryan Boudreaux shows the basics of how you can use and modify the Impress.js presentation framework provided by Bartek Szopka to add sizzle to your website and web-based presentations.

If you are looking for a cool and creative tool for implementing online presentations, Impress.js might just be the instrument you need to kick them up, or your entire website, for that matter.

Impress.js is a presentation framework based on the power of CSS3 transforms and CSS3 transitions along with JavaScript and jQuery. The framework is currently supported in modern browsers and inspired by the idea behind prezi.com, which is cloud-based presentation software. Impress.js is the brainchild of Bartek Szopka, aka bartaz from Poznań, Poland. The demo presentation reminds me of the similar look and feel to several website that utilize elements of the parallax scrolling effect.

The source code is available on github where the files are compressed into a zip archive or can be copied individually, including the demo index.html, impress-demo.css, impress.js, and a few .png image files. A screen capture of the top 52 lines of code from the index.html file is shown below in Figure B, as displayed in Dreamweaver text editor, and features an introductory ASCII Art "Welcome" from Yoda.

Figure B

The demo code is well commented and documented with explanations and also provides optional code examples for most sections of the html, css, and js files. For example, the core functioning of the presentation framework can run without any external stylesheets, as the scripts include the scaffolding needed for the presentation to work. The styles that are included are for demo purposes, as Szopka explains in his comments from lines 78 to 92 in the html code. And he does have a short warning message which states, "WARNING: Impress.js may not help you if you have nothing interesting to say :) ". It goes without saying that any presentation without substance or takeaways for the audience is a waste of time for them and the presenter. Szopka continues with several comments throughout the code about making the framework your own; in other words, the demo is his starting point for you, and he cautions that manual coding of your own presentation is what you should be aiming for in your own finished product.

The HTML

The body of the html file is given a class name of ‘impress-not-supported' <body class="impress-not-supported"> so that unsupported browsers will utilize fallback styles. And while it is not necessary to add any styles manually on this element, if the script detects that a browser is not supported it will add this class; therefore, keeping it in the HTML means that users without JavaScript will also get fallback styles as well. The fallback message is triggered for those who are viewing the presentation in browsers other than Chrome, Safari, or Firefox, as displayed in Figure C (shown in IE8 below). The fallback is just a series of slides in a top-down scrolling format.

Figure C

Getting a little deeper into the framework you will discover that the central part of the index file starts with the container <div id="impress">. And all of the presentation slides (steps) are nested inside the main div with a class name of "impress". The nested div's need to have a class name of "step", in the demo they are named a class of "step slide".

The positioning of the slides relies on passing a data attribute, which is quite similar to how parallax scrolling is accomplished. The demonstration code specify x and y positions of the step elements with data-x="XXXX" and data-y="XXXX" attributes, which places the center of the element to be positioned in point x = XXXXpx and y =XXXXpx within the presentation "canvas".

The fundamental structure of the HTML is similar to this code snippet I've created below which highlights the first four slides and the functionality (steps):

  <div id="impress">
    <div id="One" class="step slide" data-x="-1000" data-y="-1500">
      <h1>Welcome to the Presentation!</h1><br />
      <p>Featuring...</p>
      <ul>
       <li>CSS3 Transitions</li>
       <li>CSS3 Transforms</li>
       <li>HTML5</li>
      </ul>
      <q>Now...go make your own!</q>
      <p>By Ryan Boudreaux</p>
    </div>
    <div class="step slide" data-x="0" data-y="-1500">
      <p>You can also include images in your slide (step)! <img src="i/image.gif" title="image" alt="image" align="left" width="600" /></p>
    </div>
    <div class="step slide" data-x="1000" data-y="-1500">
        <p>Add links to other websites if you want! <a href="index.html">Take me Home!</a></p>
    </div>
    <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
        <span class="try">Try more features!</span>
        <h1>impress.js<sup>*</sup></h1>
        <span class="footnote"><sup>*</sup>No rhyme intended</span>
    </div>
   </div>

Notice that the id attribute of the step element is used to identify it in the URL, and this is optional, if it is not defined, the element will get a default value of `step-N` where N is a number of slide. The last slide (step) utilizes a data scale which is set to "4" in this example. The data attribute for X and Y are set to zero, but in this element the data scale means that the slide will be 4 times larger than the others. From the presentation and transitions point of view this means that it will have to be scaled down four times to bring it back to the original size.

The only CSS modification I made to the original impress-demo.css file was to change the body background radial gradient color; the code snippet is copied below:

body {
    font-family: 'PT Sans', sans-serif;
    min-height: 740px;
    background: rgb(39, 182, 170);
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(39, 182, 170)), to(rgb(190, 190, 190)));
    background: -webkit-radial-gradient(rgb(39, 182, 170), rgb(190, 190, 190));
    background:    -moz-radial-gradient(rgb(39, 182, 170), rgb(190, 190, 190));
    background:     -ms-radial-gradient(rgb(39, 182, 170), rgb(190, 190, 190));
    background:      -o-radial-gradient(rgb(39, 182, 170), rgb(190, 190, 190));
    background:         radial-gradient(rgb(39, 182, 170), rgb(190, 190, 190));
}

Sample slides

Transitioning the slides (steps) from the code snippet shown above, we get the sample four-page presentation displayed in Figures D through G. Mind you, this is a very simple modification of the demo that Bartek provides. Given more time this should be expanded to include more styling and transitions; it has been provided as a starting point for demonstration purposes. In the demo, you would tap the spacebar or arrow keys to transition the slides.

Figure D

Figure E

Figure F

Figure G

With more time, I might consider the possibilities of augmenting the impress.js framework as a foundation and implementing it into a full web site in the similar manner of parallax scrolling. In addition, several "templates" could be developed for various online presentation formats.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

2 comments