Impress.js: Difference between revisions
| Line 76: | Line 76: | ||
</source> | </source> | ||
Try it: [http://tecfa.unige.ch/guides/impress. | Try it: [http://tecfa.unige.ch/guides/impress.js/impress-0-5-3/minimalistic.html minimalistic.html] | ||
=== Tables of impress.js attributes === | === Tables of impress.js attributes === | ||
Revision as of 18:57, 25 August 2013
Introduction
Impress.js is a JavaScript library that allows creating "Prezi-style" presentations.
“impress.js is a presentation framework build upon the powerful CSS3 transformations and transitions on modern web browsers. Bartek Szopka is the creator of this amazing framework. According to the creator, the idea came to him while he was playing with CSS transformations. Prezi.com was the source that got him inspired.” (Ratnayake, 2013: 8)
Impress.js relies on CSS Transforms Level 1 and only will work in modern browser (compatibility table).
Presentation of the library
Files
After downloading and unpacking, you will see a directory structure like this (Aug 25 2013):
bartaz-impress.js-master (directory)
- css (directory)
- impress-demo.css
- js (directory)
- impress.js
- apple-touch-icon.png
- bower.json
- favicon.png
- index.html
- README.md
As you will see, for starters, you only need to consider two important files
- impress.js - the library
- impress-demo.css - a default stylesheet that defines size of slides, fonts and many other things. It is not strictly needed.
- index.html - An HTML demo file that also includes the documentation if you look at the source.
The files impress-demo.css, favicon.png and apple-touch-icon.png are not needed and are not used by the index.html demo/manual file.
We suggest starting to learn impress.js by modifying the index.html file.
Therefore, we suggest creating a copy of index.html and then opening it in a text editor (preferably one that understands HTML). Also consider renaming the original index.html file.
Structure of impress.js presentation
The JavaScript code will rely on the following structure. Your HTML file must include at the least the following:
- A big
div id="impress">wrapper that will include all your slide - Each steps is defined by
div class="step">wrapper. The div then can include an id as well as positioning, scaling and rotation information, all encoded through HTML attributes. - Somewhere, e.g. after the end of the HTML code, you must load and initialize the library
Below is a minimalist HTML5 file that contains two slides:
<!doctype html>
<html lang="en">
<head>
<link href="css/impress-demo.css" rel="stylesheet" />
</head>
<body>
<div id="impress">
<!-- slide 1 -->
<div id="slide1" class="step" data-x="0" data-y="0">
<p>Slide 1</p>
</div>
<!-- slide 2 -->
<div id="slide2" class="step" data-x="0" data-y="-1000">
<p>Slide 2</p>
<p>More to say</p>
</div>
</div>
<!-- initialize the script -->
<script src="js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>
Try it: minimalistic.html
Tables of impress.js attributes
Basically, these attributes tell where a slide will on the global canevas. Impress.ch then will create movement, scaling and rotation animation to go from one slide to the next one.
| Attribute | Description | Values | Default value | Example |
|---|---|---|---|---|
| data-x | Center of slide on x-axis | pixels | 0 | data-x ="-1000" |
| data-y | Center of slide on y-axis | pixels | 0 | |
| data-z | Center of slide on z-axis | pixels | 0 | |
| data-rotate-x | Rotation of the slide around x-axis | degrees | 0 | |
| data-rotate-y | Rotation of the slide around y-axis | degrees | 0 | |
| data-rotate-z (or data-rotate) | Rotation of the slide around z-axis | degrees | 0 | data-rotate="270" |
| data-scale | Scaling of slide | Number | 1 | data-scale = "10" |
Transition mechanics
When looking at the page, impress.js assigns one three classes: `future`, `present` and `past` to each slide. Only one, i.e. the one shown, is present. At presentation start, all slides are future. Each visited slide becomes past
By default, slides are shown after each other. However you also can script the transition using the API. The impress() function provides access to the API that controls the presentation and provides three functions you can use:
| function | Description | Example |
|---|---|---|
impress().init()
|
initializes the presentation | |
impress().next()
|
moves to next step of the presentation, | |
impress().prev()
|
moves to previous step of the presentation, | |
impress().goto() ( idx | id | element, [duration])
|
moves the presentation to the step given by its index number, id or the DOM element. The second duration parameter can be used to overide the default duration of the transition in ms. | impress().goto("menu") |
Alternatively you can get these like this:
var api = impress;
api.next();
....
A simple example
Firstly, it is best to sketch out the presentation on paper.
- Either position slides in different positions
- Or make them big / tiny (then use scaling)
Links
- Official
- Impress.js homepage
- impress.js tutorials and other learning resources (links)
- Examples and demos (links)
- Source code It's the documentation
- Tutorials
- How To Use Impress.Js, Posted on January 4, 2012
- No More Powerpoint I Have Impress.js, Paulund, Updated: March 31st, 2013
- CSS transformation (on which impress.js is based)
- CSS Transforms Level 1, W3C working draft
- CSS transform documentation at mozilla.org.
- Browser compatibility table at mozilla.org
- Books
- Rakhitha Nimesh Ratnayake (2013), Building Impressive Presentations with impress.js, Packt Publishers, ISBN 1849696489