Total Followers 132,503
Do you want to create beautiful slideshow presentations for the web using just HTML and CSS? That won’t be a problem with Impress.js, a powerful CSS3 transformation framework that lets you convert your HTML content into a slideshow with amazing effects.
Impress.js is a jQuery plugin created on github by bartez which uses CSS3 functionality to create presentations. All the modern browsers will support the stunning visualizations created by Impress.js.
Download Impress.js by visiting github. Click on the zip button as shown in the following screenshot and Impress.js library will be downloaded with the examples.
Once the download is completed extract the zip folder and you will find sample files used for the Impress.js demo. Since our purpose is learning to use the Impress.js plugin, we should start coding from scratch. First create a basic html document as shown in the code below and include impress.js file.
Basic HTML document with impress.js included
<html lang="en"> <head> <title>Impress Demo</title> </head> <body> <script src="js/impress.js"></script> </body> </html>
Initializing Impress.js
In order to use Impress.js you need to use syntax defined by the library. The plugin searches for an element with the ID impress to create slides of your visualization. So we will create a div with the ID “impress”. Then you can initialize the library using the impress().init() function as shown in the code below.
<html lang="en"> <head> <title>Impress Demo</title> </head> <body> <div id="impress"> </div> <script type="text/javascript">impress().init();</script> <script type="text/javascript" src="js/impress.js"></script> </body> </html>
Now we are ready to explore the powerful features of Impress.js. Lets move onto creating slides.
Impress.js powered slides can be anything and any size as long as it matches the criteria defined by the library. I have created 2 simple slides in the following code to get us started on our presentation.
<html lang="en">
<head>
<title>Impress Demo</title>
</head>
<body>
<div id="impress">
<div id="start">
<p style='width:1000px;font-size:80px;
text-align:center'>Creating Stunning Visualizations</p>
<p>Impress.js </p>
</div>
<div id="slide2" data-x="-1200" data-y="0">
<p style='width:1000px;font-size:80px;'>
First Slide Moves From Left To Right</p>
<p>Impress.js </p>
</div>
</div>
<script type="text/javascript">impress().init();</script>
<script type="text/javascript" src="js/impress.js"></script>
</body>
</html>
Explaining Slide Creation
Currently there are several effects you can use in creating visualizations. If you are a CSS expert you will be able to find unlimited effects using these features supported by the library,
Now we have learned everything necessary to create a stunning visualization. Lets stop talking and make the visualization using combined impress.js features.
We have already created two slides in our presentation. Lets make more slides with combining the effects of impress.js. I’ll show you the code for each slide and explain what it does exactly in the following section.
Slide 3
This slide has both data-x and data-y values defined. So it will move both x and y direction and hence will have a diagonal transition.
<div id="slide3" data-x="2200" data-y="500"> <p>This Slide Moves From Right To Left and Bottom To Top</p> </div>
Slide 4
This slide has same x value as previous and y value as -500. So the data-y value is reduced compared to previous slide. Hence it will move from top to bottom. If you want to move it from the bottom to the top, just increase the data-y value compared to the previous slide.
<div id="slide4" data-x="2200" data-y="-500">
<p>This Slide Moves Top To Bottom</p>
</div>
Slide 5
This slide has data-rotate value of 150 and increase data-x value. Hence it will rotate 150 degrees clockwise while moving on x-axis.
<div id="slide5" data-x="3200" data-rotate="150"> <p>This Slide Rotates Clockwise Around z-axis</p> </div>
Slide 6
This slide has data-scale value of 3. Hence this slide will be 3 times bigger than the previous slides.
<div id="slide6" data-x="6200" data-scale='3'>
<p>This Slide Scales 3 Times</p>
</div>
Slide 7
This slide has x, y and z values defined. So it will move away from the screen while traveling in x and y directions.
<div id="slide7" data-x="4200" data-y='1500' data-z='1500'>
<p>Away</p>
</div>
Slide 8
This slide has decreased data-z value compared to previous slide. So it will move towards the screen.
<div id="slide8" data-x="4900" data-y='1500' data-z='100'>
<p>Towards</p>
</div>
Slide 9
This slide will move further towards the screen since it has a decreased data-z value.
<div id="slide9" data-x="5600" data-y='1500' data-z='-1500'>
<p>Futher Towards</p>
</div>
Slide 10
Finally we make the last slide as data-scale=10 .Hence it will be 10 times bigger than the other slides. You will be able to see the positioning of all 10 slides in this view.
<div id="slide10" data-x="6600" data-y='3000' data-scale='10'>
<p>Visualization Slide Positions</p>
</div>
Now we are done with our presentation and full source code is given in the following section. I have used slide specific CSS styles in this example. Feel free to add your own styles and change the look and feel of your Impress.js visualization.
<html lang="en">
<head>
<style>
body{
width:1024px;
font-size:20px;
background: rgb(215, 215, 215);
background: -webkit-radial-gradient(#FFFFFF, #68BEFB);
background: -moz-radial-gradient(#FFFFFF, #68BEFB)
repeat scroll 0 0 transparent;
background: -ms-radial-gradient(#FFFFFF, #68BEFB);
background: -o-radial-gradient(#FFFFFF, #68BEFB);
background: radial-gradient(#FFFFFF, #68BEFB);
}
#start{
text-align:center;
width:1024px;
font-size:80px;
}
#slide1{
text-align:center;
width:1024px;
font-size:80px;
}
#slide2{
text-align:center;
width:1024px;
font-size:80px;
}
.step{
text-align:center;
width:1024px;
font-size:80px;
}
#slide7{
width:400px;
}
#slide8{
width:400px;
}
#slide9{
width:400px;
}
.hint_text{
font-size:30px;
background-color:#EEE;
padding:15px;
}
.fallback-message {
font-family: sans-serif;
line-height: 1.3;
width: 780px;
padding: 10px 10px 0;
margin: 20px auto;
border: 1px solid #E4C652;
border-radius: 10px;
background: #EEDC94;
}
.fallback-message p {
margin-bottom: 10px;
}
.impress-supported .fallback-message {
display: none;
}
</style>
</head>
<body>
<div id="impress">
<div id="start" >
<p>Creating Stunning Visualizations</p>
<p>Impress.js </p>
<p class='hint_text'>Press Spacebar or Tab To Get Started</p>
</div>
<div id="slide1" data-x="-1200">
<p>This Slide Moves From Left To Right</p>
</div>
<div id="slide2" data-x="1200">
<p>This Slide Moves From Right To Left</p>
</div>
<div id="slide3" data-x="2200" data-y="500">
<p>This Slide Moves From Right To Left and Bottom To Top</p>
</div>
<div id="slide4" data-x="2200" data-y="-500">
<p>This Slide Moves Top To Bottom</p>
</div>
<div id="slide5" data-x="3200" data-rotate="150">
<p>This Slide Rotates Clockwise Around z-axis</p>
</div>
<div id="slide6" data-x="6200" data-scale='3'>
<p>This Slide Scales 3 Times</p>
</div>
<div id="slide7" data-x="4200" data-y='1500' data-z='1500'>
<p>Away</p>
</div>
<div id="slide8" data-x="4900" data-y='1500' data-z='100'>
<p>Towards</p>
</div>
<div id="slide9" data-x="5600" data-y='1500' data-z='-1500'>
<p>Futher Towards</p>
</div>
<div id="slide10" data-x="6600" data-y='3000' data-scale='10'>
<p>Visualization Slide Positions</p>
</div>
</div>
<div>
<p>Your browser <b>doesn't support the features required</b> by impress.js,
so you are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>,
<b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
<script type="text/javascript" src="js/impress.js"></script>
<script type="text/javascript">impress().init();</script>
</body>
</html></pre>
<div></div>
<pre>
Apart from Opera, Impress.js visualizations are supported in all new versions of major browsers like Firefox, Chrome, Safari and Internet Explorer 10. If the browser is not supported, we can use the fallback message defined by the library. I have included it in the full source code above. Additional styles have to be defined in order to show it properly. All the code required for a browser fallback message is given below:
<style>
.fallback-message {
font-family: sans-serif;
line-height: 1.3;
width: 780px;
padding: 10px 10px 0;
margin: 20px auto;
border: 1px solid #E4C652;
border-radius: 10px;
background: #EEDC94;
}
.fallback-message p {
margin-bottom: 10px;
}
.impress-supported .fallback-message {
display: none;
}
</style>
<div>
<p>Your browser <b>doesn't support the features required</b> by impress.js,
so you are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>,
<b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
This tutorial provides a basic visualization which is used to explain the Impress.js effects. You can use CSS3 features like transition, shadows and gradients in the content of slides to create much more creative visualizations. Also make sure to change and use suitable x and y values for your slides to avoid overlapping of content. Check out some Impress.js powered visualizations given below.
Get The Only Freelancer crash course you will ever need to read!
Rakhitha Nimesh is a software engineer and writer from Sri Lanka. He likes to develop applications and write on latest technologies. He is available for freelance writing and WordPress development. You can read his latest book on Building Impressive Presentations with Impress.js. He is a regular contributor to 1stWebDesigner, Tuts+ network and Sitepoint network. Make sure to contact him at www.innovativephp.com or follow him on Twitter
Wednesday, August 8th, 2012 06:53
Impress.js certainly beats Prezi in portability, and with the advent of Impress.JS WYSIWYG editors, it becomes easy to create these presentations, too.
The most popular WYSIWYG editors for Impress.js at the moment seem to be Strut (demo) and Impressionist (demo.
Monday, May 28th, 2012 15:56
Thank you for sharring this !
But do you know if we can build a navigation menu with this kind of presentation ?
Monday, May 28th, 2012 19:52
What kind of a navigation menu are you expecting to create ?
Thursday, June 21st, 2012 12:12
I guess he’s willing to create a slide where the visualization’s position is controlled not only by the space/tab/arrows but also by a menu in the page.
Something like:
“home” -> “go to position x/y/z”
“portfolio” -> “go to position x/y/z”
“contact us” -> “go to position x/y/z”
It would be an interesting feature, i’ve been searching the net for something like this in these days but found nothing and the impress.js still remains one of the most eye-catching ways i’ve seen to presentate content, thanks for sharing!
Thursday, June 21st, 2012 12:38
ok i figured it out and it was crazy simple…feeling so confused now :D
just point your menu anchors to the respective slides, something like this:
add this where you want your menu to appear, style it and you are done.
Thursday, June 21st, 2012 15:27
this leads to the problem of adding an “active” class to the menu items indeed
Wednesday, June 27th, 2012 18:31
Hello!
There is a solution for a navigation menu for impress.js but the addition of the active class to the corresponding link hasn’t been solved yet.
If anybody wants to check the solution and try to add the class, feel free to visit:
http://stackoverflow.com/questions/11216799/impress-js-navigation-with-active-class
Any help would be really appreciated. Thank you!!!
Monday, May 28th, 2012 07:51
This is quite some impressive JavaScript. Will try it out this evening, looking forward to create some kick ass animations
Thursday, May 24th, 2012 04:46
Stunning! And the code is easy and clean.
Thanks for this great article.
Thursday, May 24th, 2012 04:13
The Impress.js demo is pretty impressive. So I thought I would carry on reading and see how this works. As a web designer I am constantly trying to learn new things and keep on top of the game. I am quite comfortable with CSS3 and I’m sure after playing about with this I will be able to create some of the amazing visualizations spoken about. Thanks for sharing.
Wednesday, May 23rd, 2012 12:18
Excellent tip will download Impress.js and try it. Thank you so much!
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Rai
Wednesday, May 23rd, 2012 12:18
Excellent tip will download Impress.js and try it. Thank you so much!
Pascal
Monday, May 28th, 2012 15:56
Thank you for sharring this !
But do you know if we can build a navigation menu with this kind of presentation ?
Rakhitha Nimesh
Monday, May 28th, 2012 19:52
What kind of a navigation menu are you expecting to create ?
nico
Thursday, June 21st, 2012 12:12
I guess he’s willing to create a slide where the visualization’s position is controlled not only by the space/tab/arrows but also by a menu in the page.
Something like:
“home” -> “go to position x/y/z”
“portfolio” -> “go to position x/y/z”
“contact us” -> “go to position x/y/z”
It would be an interesting feature, i’ve been searching the net for something like this in these days but found nothing and the impress.js still remains one of the most eye-catching ways i’ve seen to presentate content, thanks for sharing!
nico
Thursday, June 21st, 2012 12:38
ok i figured it out and it was crazy simple…feeling so confused now :D
just point your menu anchors to the respective slides, something like this:
to slilde 1
to slilde 2
to slilde 3
to slilde 4
to slilde 5
add this where you want your menu to appear, style it and you are done.
nico
Thursday, June 21st, 2012 15:27
this leads to the problem of adding an “active” class to the menu items indeed
ArtGoddess
Wednesday, June 27th, 2012 18:31
Hello!
There is a solution for a navigation menu for impress.js but the addition of the active class to the corresponding link hasn’t been solved yet.
If anybody wants to check the solution and try to add the class, feel free to visit:
http://stackoverflow.com/questions/11216799/impress-js-navigation-with-active-class
Any help would be really appreciated. Thank you!!!
Skate Devil
Monday, May 28th, 2012 07:51
This is quite some impressive JavaScript. Will try it out this evening, looking forward to create some kick ass animations
A.C.
Thursday, May 24th, 2012 04:46
Stunning! And the code is easy and clean.
Thanks for this great article.
Daniel Nolan
Thursday, May 24th, 2012 04:13
The Impress.js demo is pretty impressive. So I thought I would carry on reading and see how this works. As a web designer I am constantly trying to learn new things and keep on top of the game. I am quite comfortable with CSS3 and I’m sure after playing about with this I will be able to create some of the amazing visualizations spoken about. Thanks for sharing.
Dan Dascalescu
Wednesday, August 8th, 2012 06:53
Impress.js certainly beats Prezi in portability, and with the advent of Impress.JS WYSIWYG editors, it becomes easy to create these presentations, too.
The most popular WYSIWYG editors for Impress.js at the moment seem to be Strut (demo) and Impressionist (demo.