Looking to liven up your next presentation with a platform that’s more dynamic and engaging than PowerPoint? Try impress.js, a presentation framework that uses captivating image transitions and transformations based in CSS3.
Not a programmer? No worries! This simple tutorial has all the information you’ll need to get started with impress.js, even if you have no coding experience. Start by downloading the sample course files here.
Before making the first edits to your sample presentation, you may also need to download a basic text editing program. For this demo, we’ll be using TextEditor.
A little background before we begin:
impress.js is a presentation tool that allows users to organize all of their ideas on a single three-dimensional canvas. It’s the framework that served as the initial inspiration for Prezi, now a highly popular presentation software.
The impress.js canvas is composed of three axes, x, y, and z:
If no transformations are used, presentation content defaults to a position at the center of the canvas where all three axes intersect. Try opening the file you just downloaded called “first.html.” The screen will look like this because none of the text has been manipulated yet:
As shown above, the distinct elements, “Slide 1,” “Slide 2,” and “Slide 3” all have the same position and orientation, but you can use simple text commands to shift and rotate content all over the presentation field.
Time to start editing:
Now that we’ve established some background, it’s time to turn that stationary, overlapping text into a dynamic, visually compelling presentation. To begin, go back to the “first.html” file, but this time, instead of opening it in a web page (AKA clicking on it), right click and select “Open With→ TextEditor.” A window should appear that looks something like this:
This page might look a little scary if you’ve never done any sort of coding before, but non-programmers please don’t run for the hills just yet! It’s simpler than it looks.
The three elements of the code that we’re going to pay attention to are the <div></div> tags containing the words “Slide 1,” “Slide 2,” and “Slide 3.” In HTML, the tag, <div></div> makes it possible to divide your page into distinct elements, each with a different style. Changing what appears in the brackets of the <div> part of the tag alters the appearance of what is written in between the opening <div> tag and the closing </div> tag.
In the following sections, we’ll go over a few of the commands that you can add to the <div> tag to manipulate the text that appears in your presentation.
Shifting along the x-axis
We’ll begin our coding crash course with a text transformation along the x-axis, generated using the command, “data-x.” You can move text to the left and right by telling impress.js how many pixels you want your slides to shift from the center of your three-dimensional canvas. The default position at the center of the screen is where data-x equals zero.
For clarity, let’s try an example: begin by writing the command, “data-x=”400”” in the very first <div> tag as shown below. This command will shift the words “Slide 1” 400 pixels to the right of the center of your screen. Next, write “data-x=”-400”” in the final <div> tag, shifting the text, “Slide 3” 400 pixels to the left.
Now, when you save the TextEditor file and re-open it in your browser, the slides will scroll to the left and right like this when you use your left and right arrow keys:
Definitely an improvement over the motionless overlapping text we had at the start! And don’t worry, you’re not limited to the number 400 here- any value will work. Feel free to experiment with different pixel values to adjust the distance that your slides scroll along the x-axis.
Shifting along the y-axis
When you feel comfortable with the “data-x” command, try moving on to the next transformation on our list: a shift along the y-axis that comes from the command, “data-y.” This command is identical to “data-x,” but instead of shifting slides to the left and right, it moves them up and down.
Return to the TextEditor window and write “data-y=”400”” and “data-y=”-400”” in the first and final <div> tags respectively:
Save the file and open the webpage to see your vertical transformation in action:
Shifting along the z-axis
Up to this point we’ve been working in the familiar realm of two dimensions, but now it’s time to step it up a notch. That’s right, we’re moving on to the third dimension: the z-axis. The “data-z” command adds depth to your presentation by shifting slides along the z axis so it looks like they’re moving towards and away from you. If this sounds abstract, try it out for yourself by inputting the “data-z” commands shown below:
*Note that we’ve changed the coordinates from 400 to 4000 here. This just means that there’s a greater “distance” between the text elements on the z axis. Since the slides on this axis overlap, we need a large separation between each one to ensure that they are legible.
This is what it looks like on a webpage:
Now that we’ve gone over some of the tools required to shift text elements all over the three-dimensional impress.js canvas, we’re going to introduce one final command: “data-rotate.” This command adjusts your slides’ degree of rotation. Adding the command, “data-rotate=”90”” to your <div> tag rotates text 90 degrees counterclockwise, “data-rotate=”180”” results in a 180 degree counterclockwise rotation, and so on.
Below, find an example set of commands that rotates slides 1, 2, and 3 by 120, 240, and 360 degrees respectively:
The result is a pinwheel of text spinning around at the center of your screen:
*The text above is overlapping because we only changed the rotation of the slides, not the position. To increase readability, we’d have to move each slide from its position at the intersection of the x, y, and z axes.
There you have it: a few simple commands to take your next presentation from dull and drab to dynamic and dramatic. That wasn’t so hard was it?
And now that you have some basic transformations in your impress.js toolkit, try combining multiple commands to create more complex transitions and effects. You’ll find examples of just a few of the many text manipulation possibilities out there when you open the file you downloaded earlier called “final.html.”
When you master the commands outlined in this tutorial, take a look at this list to discover even more manipulations to try.
Still uninspired? Check out these great impress.js examples to get your creative juices flowing.