CSS3 Transitions rocks once again here in creating stunning presentations online. Say thanks to Impress.js a superb jQuery plugin that builds impressive presentations using the CSS3 transforms & transitions.
The presentations created using Impress.js are really mesmerizing as the transition effects make each and every slide come alive and give a different look. According to my point of view, If I would like to give a presentation to my clients then I would definitely go with Impress.js
It is a free jQuery plugin with awesome premium features and amazing transition effects.
How to use Impress.js – Step by Step Guide to Impress.js tutorial?
If you want to use Impress.js in your presentations then you just have to include the required files in the web page.
Download the zip file of Impress.js from the GitHub Repository.
Include the script files before the and </body> section of your webpage.
<body> <script src="js/impress.js"></script> </body>
If you want your own CSS styles then include your own CSS stylesheet in the <head> section, but if you want the default CSS files of the Impress.js library then insert it in the head section using the below code.
<link href="css/impress-demo.css" rel="stylesheet" />
Now let’s start with the basics of the impress.js tutorial.
The first thing and the important thing that Impress.js requires are the root element. All the components slide are wrapped in the element, it is like the wrapper class.
Now this will start the engine of the Impress.js library.
Very Important Note:
Declare the initialization script below the impress.js script, if not then your presentation will not work properly as you are looking for.
Let’s create slides of our requirements,
Add all you slide content in a <div> element with a class name of ‘step’ and if required add an Id also.
<div id="demo" class="step"> <p>This is Tuluzz.com - Impress.js Demo</q> </div>
Similarly, you can add more slides one by one in your presentation.
You are thinking what was that doesn’t make a sense of, how Impress.js will help me build impressive slides.
Wait, let me show you:
The main fun and excitement start now with the addition of data attribute to your slides. Data attributes give your slides a turnover and make it come out of the presentation. Let’s see how:
<div id="impress"> <div id="" class="step" data-x="0" data-y="0"> <h1>This is Slide 1 of Tuluzz.com</h1> </div> </div>
Now the data attribute i.e. data-x=”0″ and data-y=”0″ will place your slide in the center of your page.
Similarly, looking at other coordinates: data-x=”-1000″ and data-y:-1500
<div class="step" data-x="-1000" data-y="-1500"> <h2>This is slide 2, created at <strong>Tuluzz.com</strong> demo environment</h2> </div>
Now this tells us that the second slide will have an x position of -1000 and the position of y -1500 and now this means that the first slide will scroll in the bottom right direction of the presentation and the second slide will come down from top left direction.
Now going to our next data attribute:
<div class="step" data-x="500" data-y="-1500"> <h2>This is slide 3 </h2> </div>
Now, this slide states that the x is at a position of 500 and y is at a position of -1500. The third slide will move in a horizontal way from right to left after we navigate from slide 2.
Now moving forward using another data-attribute of the plugin i.e. data-scale
<div class="step" data-x="0" data-y="0" data-scale="0.5"> <h2>This is slide 4</h2> </div>
data-scale: 0.5 means that the content in slide 4 will be half of the size as compared to others, it is just for transition point of view after the CSS3 transition it will come back to its normal size.
Now coming to our next data attribute: i.e. data-rotate
<div class="step" data-x="850" data-y="3000" data-rotate="90"> This is slide 5 and it rotates 90 degrees clockwise. </div
data-rotate: 90 means the slide 5 will make an entry to the screen in a 90-degree direction.
For 3D transition effect on any of your slide, you can specify your rotate data attributes for each defined dimensional axis (x,y,z). See below code for more precision:
<div class="step" data-x="3500" data-y="2100" data-rotate-x="30" data-rotate-y="-60" data-rotate-z="90" data-scale="4"> This is slide 6 and comprises of a 3D transition. </div>
Know More About These:
data-rotate-x: Rotate your slide about the x-axis in 3D transitions.
data-rotate-y: Rotate your slide about the y-axis in 3D transitions.
data-rotate-z: Rotate your slide in z-axis in 3D transitions.
data-transition-duration=”2000″ //If you want to change the duration of the transition between slides in ms
data-perspective=”500″ //You can control the perspective, giving it a number of pixels the default is set to 1000.
Note: If you do want any 3D effects in your slide you can set data-perspective=”0″.
Similarly, you can add all your data attributes as you want to design and give your slide a different look from others using various tools to present their slide.
These were the data-attributes which give your presentation a super cool look to each and every slide.
Now let’s see one one of the extra feature that Impress.js supports:
<body class="impress-not-supported"> <div class="fallback-message"> <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>
Give it a try and see the changes in your presentations.