Impress.js – Presentation Framework with Power of CSS3 Transitions

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.

Impress.js

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.

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.

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.

This will hold all the elements of your presentations. Now comes the turn to implement the Javascript code which will initialize the library. The function to initialize the library is: impress().init()

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.

Recommended Readings:

Animate.CSS – How to Add CSS3 Animations with CSS3 Library Perfectly

Create CSS3 Text Animation with JQuery Plugin

Going further,

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.

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:

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

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:

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

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

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:

Know More About These:

A Jquery Plugin for Web Typography

Bounce.js – How to Create Javascript Animations Easily

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:

If any of the browsers that are not supported by Impress.js then Impress.js detects it automatically and displays the default message to the user. In case if the user is without JavaScript then you need to add the class manually to the <body> tag. Check out below code:

So, now I can say that you are an Impress.js presentation builder who can give life to all the slides filled with content in a very cool way using a javascript library.

Give it a try and see the changes in your presentations.

(Visited 271 times, 1 visits today)
Share is Caring...!
This entry was posted in Web Design and tagged , , , , , , , . Bookmark the permalink.
Amazon and the Amazon logo are trademarks of Amazon.com, Inc. or its affiliates.
Tuluzz.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for website owners to earn advertising fees by advertising and linking to Amazon(.com, .co.uk, .ca etc) and any other website that may be affiliated with Amazon Service LLC Associates Program.

Leave a Reply