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.
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.
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="One" class="step slide" data-x="-1000" data-y="-1500">
<h1>Welcome to the Presentation!</h1><br />
<q>Now...go make your own!</q>
<p>By Ryan Boudreaux</p>
<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 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 id="title" class="step" data-x="0" data-y="0" data-scale="4">
<span class="try">Try more features!</span>
<span class="footnote"><sup>*</sup>No rhyme intended</span>
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:
font-family: 'PT Sans', sans-serif;
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 slidesTransitioning 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.
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.