Impress.js: Difference between revisions
m (→First steps) |
m (→First steps) |
||
| Line 11: | Line 11: | ||
== First steps == | == First steps == | ||
=== Files === | |||
After [https://github.com/bartaz/impress.js/blob/master/index.html downloading] and unpacking, you will see a directory structure like this (Aug 25 2013): | After [https://github.com/bartaz/impress.js/blob/master/index.html downloading] and unpacking, you will see a directory structure like this (Aug 25 2013): | ||
| Line 18: | Line 20: | ||
: apple-touch-icon.png | : apple-touch-icon.png | ||
: ''css'' (directory) | : ''css'' (directory) | ||
:: | :: impress-demo.css | ||
: favicon.png | : favicon.png | ||
: '''index.html''' | : '''index.html''' | ||
| Line 24: | Line 26: | ||
:: '''impress.js''' | :: '''impress.js''' | ||
As you | As you will see, there just two important files | ||
* impress.js - the library | * impress.js - the library | ||
* index.html - An HTML demo file that also includes the documentation if you look at the source. | * index.html - An HTML demo file that also includes the documentation if you look at the source. | ||
Therefore, | 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 <code>index.html</code> 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 <code><nowiki>div id="impress"></nowiki></code> wrapper that will include all your slide | |||
* Each slide is defined by <code><nowiki>div class="step slide"></nowiki></code> wrapper. The div then can include an id as well as positioning, scaling and rotation information, all encode through HTML attributes. | |||
<source lang="HTML" enclose="div"> | |||
<div id="impress"> | |||
<div class="step slide" data-x="0" data-y="-1500"> | |||
<q>Content of slide 1</q> | |||
</div> | |||
<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1"> | |||
<p>Content of slide 2</p> | |||
</div> | |||
</div> | |||
</source> | |||
=== Transition mechanics === | |||
We 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'' | |||
== Links == | == Links == | ||
Revision as of 13:30, 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)
First steps
Files
After downloading and unpacking, you will see a directory structure like this (Aug 25 2013):
bartaz-impress.js-1e15c05 (directory)
- README.md
- apple-touch-icon.png
- css (directory)
- impress-demo.css
- favicon.png
- index.html
- js (directory)
- impress.js
As you will see, there just two important files
- impress.js - the library
- 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 slide is defined by
div class="step slide">wrapper. The div then can include an id as well as positioning, scaling and rotation information, all encode through HTML attributes.
<div id="impress">
<div class="step slide" data-x="0" data-y="-1500">
<q>Content of slide 1</q>
</div>
<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
<p>Content of slide 2</p>
</div>
</div>
Transition mechanics
We 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
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
- Books
- Rakhitha Nimesh Ratnayake (2013), Building Impressive Presentations with impress.js, Packt Publishers, ISBN 1849696489