[code lang=”css” toggle=”no”]
.step {
font-size: 1.2em;
line-height: 1.4em;
}
.step h2 {
text-shadow: 4px 4px 3px #999999;
font-size: 1.8em;
line-height:1.9em;
}
.step ul {
list-style-type: square;
font-size: 1.4em;
text-align: left;
line-height: 1.5em;
list-style-position: inside;
} [/code]
Here it is in action, switch to the second slide — by pressing space or right to see it in action.
Certainly not the sexiest slide ever, but its just to make a point. Which is that you can style these slides with the full flexibility that CSS affords. In fact you can give each slide a unique id or add additional CSS classes to the slides to control their styling.
Animating Slide Contents
So now we’ve seen some interesting transitions between slides, but the slides themselves are static. Wouldn’t it be nice if you could have some of those PowerPoint-like animation within the slides; where things pop in left right and center.
The good news is, impress.js makes this easy to achieve as well. We will use standard CSS transitions to perform these animations so you don’t even need JavaScript to perform them.
What impress.js does when it is initialized and as you move between slides is, that it adds the class present to any slide that is currently being displayed. It adds the class past to all slides that lie before the current slide; and it adds the class future to slides that have yet to come. You can use this fact to do nifty things such as hiding all future or past slides, or animating the contents of a slide when it becomes the “present” slide.
So when you move forward from Slide 3 to Slide 4, the future class will be removed from Slide 4, and the ‘present’ class will be added. Similarly the present class will be removed from Slide 3, and the past class will be added. You can use this knowledge to transition / animate between these states. You can apply a different set of CSS classes to the future state and different ones in the present state and add a transition class as well, so moving between the slides will trigger the animation.
In the second slide as it stands now, we have four points, how would it be if these were to fly in from the left? Lets see what we need to do to achieve this. First of all, they need to be placed to the left of the slide.
To do this will will apply a CSS transform to them by default, should do it. This will move these bullet points 300 pixels to the left and off the stage. We will also add a CSS transition property transition: all 1s ease-in 0s;. This specifies an animation duration of 1s applied on all CSS properties, a delay of 0 second with an ease-in timing function. Since both CSS Transforms and Transition are rather new standards, it is important to add them with all browser prefixed. It should look as follows:
[code lang=”css” toggle=”no”]
.step ul {
list-style-type: square;
font-size: 1.4em;
text-align: left;
line-height: 1.5em;
list-style-position: inside;
transform: translateX(-300px);
-moz-transform: translateX(-300px);
-ms-transform: translateX(-300px);
-o-transform: translateX(-300px);
-webkit-transform: translateX(-300px);
transition: all 1s ease-in 0s ;
-moz-transition: all 1s ease-in 0s ;
-ms-transition: all 1s ease-in 0s ;
-o-transition: all 1s ease-in 0s ;
-webkit-transition: all 1s ease-in 0s ;
}[/code]
This is before the slide isn’t the current slide. For when it becomes the current slide we need to add the following:
[code lang=”css” toggle=”no”]
.step.present ul {
transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
-webkit-transform: translateX(0px);
}[/code]
That’s it! Run this and you will get the following:
One minor adjustment can make this much better. We can add overflow: hidden; to the step class so that the bullet points don’t appear until they enter the slide. Here is how that would look:
If you wanted to individually animate each element in this list, that isn’t difficult either. It just require some more CSS coding. We won’t explain how that’s done — you can look at the code and figure it out — but here is what that might look like:
Conclusion
The impress.js framework is a powerful way of creating presentations that are unique, but it can also be a little overwhelming, especially considering that it requires manual coding.
The framework is powerful enough to allow even the traditional type of presentation — hint, hide future and past slides, apply transitions and keep them all in the same place — but you are probably better off using a regular presentation tool for those.
impress.js is for those who would like to show off their presentation skills, their web development knowledge and their love for open web standards all at once.
You can download the framework from GitHub, and can see an impressive demo of its features there as well.
