Impress.js, amazing presentations in HTML5 and CSS3

When we make a presentation of something: a product, an academic work or an idea, we just do not want that presentation to be boring because the public will eventually lose interest.
Creating attractive presentations is not an easy task and demands a lot of time and dedication. It that really true? 

Have you ever imagined being able to create interesting self-explanatory presentations using simple tools like (for instance) a notepad? Moreover, requiring only a CSS3 compatible browser to be played anywhere and on any device?

This amazing solution is brought by Impress.js, , a javascript library inspired by the idea behind Prezi allowing you to create dynamic and high-impact presentations using the features of HTML5 and the power of CSS3.

The prerequisite to successfully use this tool is just to have some knowledge in HTML, CSS3 and be a reasonable designer, since the tool does not have ready styles or animations where you only replace a few things and everything is ready up. Still… is worth checking the results obtained from the use of impress.js.

This is a presentation that shows some of the power of impress.js

One great benefit of impress.js is the lightness of the presentation, not only by the size (previous presentation has just over 1MB - 95% are the images), but the transitions that are smooth and do not no crashes. The 3D effects are very satisfactory and CSS3 offers a great variety of possibilities in the styles development and animations allowing greater freedom in creation.

Using impress.js
The impress.js is simple to use! In this address you can download the file package containing the sample presentation. With it we can understand exactly how the impress.js works because it contains a detailed explanation of each step of the presentation in the index.html file source code . Moreover we can use this sample as a template, reusing the styles and animations.

The downloaded package contains the CSS style used in the presentation sample (this can be changed or completely rebuilted), the library Impress.js, the index.html and some others files. 
But if you do not want to use the package with the sample, we can only insert the impress.js library in our presentation HTML file and call impress().init(). One tip is putting this call at the end of the html file, when all page elements will be ready.

<script src="js/impress.js"></script>
This is an example of how you can insert the library at the end of the file and call the impress().init (), but you can call it at an event too.
Below, we will show some parts of the sample code file with explanations that will help you create your own presentation.
<div id="impress">

<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
    <q>Aren't you just bored with all those slides-based presentations?</q>

<div class="step slide" data-x="0" data-y="-1500">
    <q>Don't you think... <strong>in modern browsers...</strong></q>

<div class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
    <p>It's a <strong>presentation tool</strong> <br/>

To build your presentation is necessary to know some basic rules of impress.js:

impress: the id impress is the set of slides. It's something like the stage to other slides. All presentation slides must be within the element that contains this id. 
<div id="impress">

step: the step is a class that define an element to be displayed. A stylized HTML element with this class becomes a step (slide) presentation. It can also be a tag <img>. In the previous example, taken from the sample file, each div element can be understood as a slide, but this is not an impress.js rule because what defines a stage presentation is the use of the step class.


data-x, data-y, data-z 
The position of the slide is defined by the attributes date-x (horizontal), date-y (vertical) and date-z (depth). The default value is 0 (zero) and is measured in pixels.  
In the example below the slide is positioned with the value "0" on the X axis and "0" in the Y axis. 
These values are referred to the center of the slide. One important tip is that the Y axis works with inverted references: up negative values (date-y = "-500") and down (date-y = "500") positive values.
<div id="start" class="step" data-x="0" data-y="0">

To achieve the effect of sliding from right to left, we can do as follows: 
<div id="second" class="step" data-x="1000" data-y="0">
<p>slide 2</p>
The slide will move only horizontally since the y-axis remained with the same value of the previous slide.

The data-z defines the sense of depth. The higher the number, the element will feel closer to us, the smaller, farther.
<div id="third" class="step" data-x="1000" data-y="0" data-z="10000">
<p>slide 3</p>

Define the scale of the element. The number "n" says that this element will be n times greater than the others. The default value is 1.
<div id="quarter" class="step" data-x="1000" data-y="0" data-scale="5">
<p>slide 4</p>

Define the element rotation degree . In the next example the slide will have a rotation of 90 degrees clockwise 
<div id="fifth" class="step" data-x="1000" data-y="0" data-rotate="90">
<p>slide 5</p>

data-rotate-x, data-rotate-y e data-rotate-z  
Is the same idea of previous data-rotate, but applied to each axis: x, y and z.
<div id="sixth" class="step" data-x="1000" data-y="0" data-rotate-x="40">
<p>slide 6</p>

It is important to note that all definitions are based on the previous slide. So pay attention to the positions, grades and scales of the previous slide to build the current one.  

Basically that’s all folks! Now use your creativity and get to work.


Post a Comment