impress.js is a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

CSS is supported by impress to style slides.

Offical demo

Startting

To use this library, you need to download codes from GitHub, and include impress.js at the end of HTML file.

1
2
<script src="js/impress.js"></script>
<script>impress().init();</script>

HTML class elements

Every single slide has to be tagged with class="step", and then impress.js will render it.

1
2
3
4
5
6
7
8
9
10
11
12
<div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
    <p>the only <b>limit</b> is your <b class="imagination">imagination</b></p>
</div>

<div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20">
    <p>want to know more?</p>
    <q><a href="http://github.com/bartaz/impress.js">use the source</a>, Luke!</q>
</div>

<div id="one" class="step" data-x="6000" data-y="4000" data-z="-3000">
    <p>one more thing...</p>
</div>

data-x, data-y are coordinates for a single slide. (0,0) is screen center.
data-scale defines the scaling multiplier of elements. data-scale="6" means 6 times larger than others.
data-rotate represents the amount of clockwise rotation of the element relative to 360 degrees.
data-z represents depth distance of elements. data-z="-3000" means that element is positioned far away from the camera (by 3000px). This is useful to show hierarchical relations between slides.

Style slides

Font family and background

1
2
3
4
5
6
7
8
9
10
11
body {
    font-family: 'PT Sans', sans-serif;
    min-height: 740px;
    background: rgb(215, 215, 235);
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(225, 225, 225)), to(rgb(200, 210, 200)));
    background: -webkit-radial-gradient(rgb(225, 225, 225), rgb(200, 210, 200));
    background:    -moz-radial-gradient(rgb(225, 225, 225), rgb(200, 210, 200));
    background:     -ms-radial-gradient(rgb(225, 225, 225), rgb(200, 210, 200));
    background:      -o-radial-gradient(rgb(225, 225, 225), rgb(200, 210, 200));
    background:         radial-gradient(rgb(225, 225, 225), rgb(200, 210, 200));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
a {
    color: inherit;
    text-decoration: none;
    padding: 0 0.1em;
    /*background: rgba(255,255,255,0.5);*/
    text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
    border-radius: 0.2em;
    -webkit-transition: 0.5s;
    -moz-transition:    0.5s;
    -ms-transition:     0.5s;
    -o-transition:      0.5s;
    transition:         0.5s;
}
a:hover,
a:focus {
    background: rgba(255,255,255,1);
    text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
}

Global style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.step {
    position: relative;
    width: 900px;
    padding: 40px;
    margin: 20px auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    -ms-box-sizing:     border-box;
    -o-box-sizing:      border-box;
    box-sizing:         border-box;
    font-family: 'PT Serif', georgia, serif;
    font-size: 48px;
    line-height: 1.5;
}

Transperent inactive step

1
2
3
4
5
6
7
8
9
10
.impress-enabled .step {
    margin: 0;
    opacity: 0.3;
    -webkit-transition: opacity 1s;
    -moz-transition:    opacity 1s;
    -ms-transition:     opacity 1s;
    -o-transition:      opacity 1s;
    transition:         opacity 1s;
}
.impress-enabled .step.active { opacity: 1 }

Normal slide style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.slide {
    display: block;
    width: 900px;
    height: 700px;
    padding: 40px 60px;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    color: rgb(102, 102, 102);
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -1px;
}

States styling

.future class is added to all elements that havn’t been visited yet. .present class is added to the step currently on show. .past class is added to all the elements have been visited. 

1
2
3
.past {
  display: none;
}

3D clickable in Chrome

1
2
.impress-enabled          { pointer-events: none }
.impress-enabled #impress { pointer-events: auto }

Overview

1
2
3
4
5
6
7
8
#overview { display: none }
/*
*   make other steps visible and give them a pointer cursor using the `impress-on-` class.
*/
.impress-on-overview .step {
    opacity: 1;
    cursor: pointer;
}

References

[1] impress.js API documentation