Impress.js: Difference between revisions

Latest revision as of 22:18, 18 March 2018

This article or chapter is incomplete and its contents need further attention. Some information may be missing or may be wrong, spelling and grammar may have to be improved, use your judgment!

Introduction

Impress.jsis 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 browsers (compatibility table).

Demos

It's probably a good idea to look at a few demos, in order to decide whether you want to read on: Examples and demos

Principle

An impress.js presentation is (like in a Prezi presentation), a collection of "steps" that are positioned on a huge drawing canvas. Impress.js will allow the user to navigate to each "step", using transition animations.

An impression of the overall presentation canvas (from the demo)

This library is used in the following way:

You will have to write your "steps" in HTML code
Each step is wrapped in a div using the class step. You then define position, scale and rotation for each step content.
Steps can be styled with classes and id's. There are some defaults, and in addition you can use the slide class". However, advanced authors would adapt the demo style sheet.

Summary: Create a series of

that you position (scale and rotate) on a huge HTML page. Impress.js will allow the user to navigate between these by zooming on each.

<div class="step slide" .... positioning/scaling/rotation parameters here ....>
 .... HTML contents here ...
</div>

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 an impress.js presentation

The JavaScript code will relies on a precise HTML structure. Your HTML file must include at the least the following:

A div id="impress"> wrapper that will include all your steps (also called slides).
Each step is defined by a div class="step"> wrapper. The div then can include an id as well as positioning, scaling and rotation information. The latter are defined with HTML attributes, for example data-x, data-z, data-scale.
You can add your own classes for styling. For example using using class="step myslide" would allow you to to define your own CSS style for "myslide".
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

Positioning, rotation and scaling with HTML attributes

Basically, these data-* attributes tell where a step will "sit" on the global canvas. 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-y="1000"
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"

Here is a screenshot of a simple example. The screen capture was made using from the last step, which has no content but just a big zoom out.

Positioning, rotation and scaling

Code fragment:

<div id="impress">

  <!-- slide 1 -->
  <div id="slide1" class="step slide" data-x="0" data-y="0">
    Slide 1
    <ul>
      <li>Sits in the middle</li>
    </ul>
  </div>

  <!-- slide 2 -->
  <div id="slide2" class="step slide" data-x="0" data-y="-1000">
    Slide 2
    <ul>
      <li>Sits up</li>
    </ul>
  </div>

  <!-- slide 3 -->
  <div id="slide3" class="step slide" data-x="1500" data-y="0" data-rotate="90" data-rotate-y="180">
    Slide 3
    <ul>
      <li>Sits right and is rotated</li>
    </ul>
  </div>

  <!-- slide 4 -->
  <div id="slide4" class="step slide" data-x="0" data-y="2000" data-scale="4">
    Slide 4
    <ul>
      <li>Sits down and is big</li>
    </ul>
  </div>

  <!-- overview, just position and zoom out a lot -->
  <div id="overview" class="step" data-x="1800" data-y="1500" data-scale="8">
  </div>

Try it: positions.html

The default style sheet

The default style sheet, i.e. css/impress-demo.css does a lot of things. Let's just introduce the easy stuff. Firstly, it resets all HTML elements. In other words, do not expect to see default rendering of HTML tags. For example, an <ul> <li> </li> </ul> will not produce bullets. This style sheet then defines some classes and id's that are useful to have for styling a "slide".

The demo style sheet sheet can be used as is. However, it is meant for inspiration. In particular it shows how to style differently each slide of the demo file, originally called index.html.

slide class: The slide class will make the slide look a slide; By default it has rounded corners, light background; Size 900 x 700 px; The HTML q tag is made big.

id=title: The title defines the style for the first step that has id=title; In particular it refines h1 to be big.

id=big: Styles the slide for big ideas; The b tag has a size of 250px

Below is the HTML fragment of a little demo file that makes use of this demo CSS.

<div id="impress">
  <!-- slide 1 -->
  <div id="title" class="step slide" data-x="0" data-y="0">
     <h1>Slide 1</h1>
     <q>impress.js title slide</q>
     <p class="footnote">Play with the arrow keys, either up/down or back/forward</p>
  </div>

  <!-- slide 2 -->
  <div id="big" class="step slide" data-x="0" data-y="-1000">
    This is <b>nice</b>
    <p class="thoughts"> ... for communicating thoughts</p>
  </div>

  <!-- slide 2 -->
  <div id="big" class="step slide" data-x="0" data-y="-1000">
    This is <b>nice</b>
    <p class="thoughts"> ... for communicating thoughts</p>
  </div>

  <!-- slide 3 -->
  <div id="tiny" class="step slide" data-x="0" data-y="-800">
    <p>You may consider changing id's into classes, if you like the original demo slides</p>
    <p>The included CSS is just for inspiration. Actually, we make a few minor changes</p>
  </div>
</div>

Try it: minimalistic-with-style.html

The demo CSS file also demonstrates that you could do CSS animations within the style sheet and other fancy stuff. Study it yourself, we will go back to basics here...

Transition mechanics

When a user loads the page, impress.js assigns one three classes: `future`, `present` and `past` to each step. Only one, i.e. the one shown, is present. At presentation start, all steps are future. Each visited slide becomes past. future and past steps are rendered opaque in the demo style sheet.

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. It provides four functions you can use, goto() being the most interesting one.

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)

Second, you will have to think about the kinds of steps you would like to use, since you will have to make modifications to the CSS file. This example should provide you with some inspiration.

Requirements

We would like to produce five kinds of slides

slide: "Slides" styled steps
normal: normal steps (no slide look)
note: small notes
thoughts: bold thoughts, using one sentence and big fonts
picture: pictures with a small legend

Each of these will have a CSS class, e.g. you could do something like:

 <div id="slide1" class="step slide" data-x="-1000" data-y="-1000">
  ....
  </div>
  <div id="slide3" class="step note" data-x="200" data-y="-1100" data-scale="0.2">
    <p>One <b>bold</b> idea</p>
  </div>

In addition,

each of these (or almost) should support the same small set of HTML tags: h1, ul, ol, li, p, q, big, b
Some extra stuff will be coded with extra classes or maybe just inline styling in the HTML files ...

Overview of the impress-min-presi CSS

The following table (needs to be updated/verified) shows what kinds of tags you should use for each step type:

	slide	normal	note	thoughts	picture
h1	Very large and up	Very large	no	no	no
ul,ol,li	yes	yes	no	no	no
p	yes	yes	no	very large	small (use for captions)
q	yes	yes	no	very large	rotated, red and 500px down (adjust if needed)
big	yes	yes	yes	yes	no
b	yes	yes	yes	yes	no

Of course, you can use any html you like. What we mean is just that we didn't style those ....

In addition, at the end of your HTML slides code, don't forget to insert the overview:

  <div id="overview" class="step" data-x="1800" data-y="1500" data-scale="8">
  </div>
</html>

Test of impress-min-presi

Directory: http://tecfa.unige.ch/guides/impress.js/impress-demo-1/
test.html
impress.js
impress-min-presi.css

Example of a little conference talk

SMWCON ´13 slides

Links

Official

Impress.js homepage
impress.js tutorials and other learning resources (links)
Examples and demos (links)
Source code It's the documentation

Example code using in this page

http://tecfa.unige.ch/guides/impress.js

Tutorials

How To Use Impress.Js, Posted on January 4, 2012
No More Powerpoint I Have Impress.js, Paulund, Updated: March 31st, 2013

Data-x attributes

The data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation by scripts. (MDN, March 2018)
3.2.3.8 Embedding custom non-visible data with the data-* attributes

CSS transformation (on which impress.js is based)

CSS transforms tutorial (this wiki)
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

Alternatives

https://github.com/hakimel/reveal.js

@@ Line 1: / Line 1: @@
-{{stub}}
+{{incomplete}}
+<!-- <pageby nominor="false" comments="false"/> -->
 == Introduction ==
-Impress.js is a [[JavaScript]] library that allows creating "[http://en.wikipedia.org/wiki/Prezi Prezi-style]" presentations.
+[https://github.com/impress/impress.js Impress.js]is a [[JavaScript]] library that allows creating "[http://en.wikipedia.org/wiki/Prezi Prezi-style]" presentations.
 {{quotation|impress.js is a presentation framework build upon the powerful CSS3
@@ Line 10: / Line 11: @@
 him inspired.}} ([http://www.packtpub.com/building-impressive-presentations-with-impressjs/book Ratnayake, 2013: 8])
-Impress.js relies on [http://dev.w3.org/csswg/css-transforms CSS Transforms Level 1] and only will work in modern browser ([https://developer.mozilla.org/en-US/docs/Web/CSS/transform?redirectlocale=en-US&redirectslug=CSS%2Ftransform#Browser_compatibility compatibility table]).
+Impress.js relies on [http://dev.w3.org/csswg/css-transforms CSS Transforms Level 1] and only will work in modern browsers ([https://developer.mozilla.org/en-US/docs/Web/CSS/transform?redirectlocale=en-US&redirectslug=CSS%2Ftransform#Browser_compatibility compatibility table]).
 '''Demos'''
@@ Line 19: / Line 20: @@
 '''Principle'''
-An impress.js presentation is (like in a Prezi presentation), a collection of "steps" that are positioned on a huge drawing canevas. Impress.js will allow the user to navigate to each "step", using transition animations.
+An impress.js presentation is (like in a Prezi presentation), a '''collection of "steps"''' that are '''positioned on a huge drawing canvas'''. Impress.js will allow the user to navigate to each "step", using transition animations.
-[[File:Impress.js-3.png|600px|thumbnail|none|An impression of the overal presentation canvas (from the [http://bartaz.github.io/impress.js/#/bored impress.js demo)] ]]
+[[File:Impress.js-3.png|600px|thumbnail|none|An impression of the overall presentation canvas (from the [https://impress.js.org/#/bored demo)] ]]
 This library is used in the following way:
 * You will have to write your "steps" in HTML code
-* Each step is wrapped in a <code>div</code> using the class "step". In addition, you can definition position, scale and rotation for each step.
+* Each step is wrapped in a <code>div</code> using the class <code>step</code>. You then define position, scale and rotation for each step content.
 * Steps can be styled with classes and id's. There are some defaults, and in addition you can use the <code>slide</code> class". However, advanced authors would adapt the demo style sheet.
+Summary: Create a series of <code><div class="step"> </div> </code> that you position (scale and rotate) on a huge HTML page. Impress.js will allow the user to navigate between these by zooming on each.
 <source lang="html5">
@@ Line 65: / Line 68: @@
 The JavaScript code will relies on a precise HTML structure. Your HTML file must include at the least the following:
-* A <code><nowiki>div id="impress"></nowiki></code> wrapper that will include all your steps (also called slides).
+* A <code><nowiki>div id="impress"></nowiki></code> wrapper that will include all your '''steps''' (also called slides).
-* Each step is defined by a <code><nowiki>div class="step"></nowiki></code> wrapper. The div then can include an id as well as positioning, scaling and rotation information. The latter are defined with HTML attributes. Finally, you can of course add your own classes.
+* Each step is defined by a <code><nowiki>div class="step"></nowiki></code> wrapper. The div then can include an id as well as '''positioning, scaling and rotation information'''. The latter are defined with HTML attributes, for example <code>data-x</code>, <code>data-z</code>, <code>data-scale</code>.
+* You can add your own classes for styling. For example using using <code>class="step myslide"</code> would allow you to to define your own CSS style for "myslide".
 * Somewhere, e.g. after the end of the HTML code, you must load and initialize the library
@@ Line 98: / Line 102: @@
 </source>
-Try it: [http://tecfa.unige.ch/guides/impress.js/impress-0-5-3/minimalistic.html minimalistic.html]
+Try it:
+* [http://tecfa.unige.ch/guides/impress.js/impress-0-5-3/minimalistic.html minimalistic.html]
 === Positioning, rotation and scaling with HTML attributes ===
-Basically, these attributes tell where a slide will on the global canvas. Impress.ch then will create movement, scaling and rotation animation to go from one slide to the next one.
+Basically, these data-* attributes tell where a step will "sit" on the global canvas. Impress.ch then will create movement, scaling and rotation animation to go from one slide to the next one.
 {| class="wikitable sortable"
@@ Line 282: / Line 287: @@
 * Some extra stuff will be coded with extra classes or maybe just inline styling in the HTML files ...
-=== Test ===
+=== Overview of the impress-min-presi CSS ===
-(working, but not finished so far ....)
+The following table (needs to be updated/verified) shows what kinds of tags you should use for each step type:
+{| class="wikitable sortable"
+|-
+! !! slide !! normal !! note !! thoughts !! picture
+|-
+| h1       || Very large and up || Very large || no || no || no
+|-
+| ul,ol,li || yes || yes || no || no || no
+|-
+| p        || yes || yes || no || very large || small (use for captions)
+|-
+| q        || yes || yes || no || very large || rotated, red and 500px down (adjust if needed)
+|-
+| big      || yes || yes || yes || yes || no
+|-
+| b        || yes || yes || yes || yes || no
+|}
+Of course, you can use any html you like. What we mean is just that we didn't style those ....
+In addition, at the end of your HTML slides code, don't forget to insert the overview:
+<source lang="html5">
+  <div id="overview" class="step" data-x="1800" data-y="1500" data-scale="8">
+  </div>
+</html>
+</source>
+''' Test of impress-min-presi'''
 * Directory: http://tecfa.unige.ch/guides/impress.js/impress-demo-1/
@@ Line 290: / Line 323: @@
 * [http://tecfa.unige.ch/guides/impress.js/impress-demo-1/impress.js impress.js]
 * [http://tecfa.unige.ch/guides/impress.js/impress-demo-1/impress-min-presi.css impress-min-presi.css]
+'''Example of a little conference talk'''
+* [http://tecfa.unige.ch/tecfa/talks/schneide/smwcon13/smwcon-2013-schneider.html#/slide1 SMWCON ´13 slides]
 == Links ==
 ; Official
-* [http://bartaz.github.io/impress.js Impress.js homepage]
+* [https://github.com/impress/impress.js Impress.js homepage]
 * [https://github.com/bartaz/impress.js/wiki/impress.js-tutorials-and-other-learning-resources impress.js tutorials and other learning resources] (links)
 * [https://github.com/bartaz/impress.js/wiki/Examples-and-demos Examples and demos] (links)
@@ Line 305: / Line 341: @@
 * [http://www.cubewebsites.com/blog/guides/how-to-use-impress-js/ How To Use Impress.Js], Posted on January 4, 2012
 * [http://www.paulund.co.uk/no-more-powerpoint-i-have-impress-js No More Powerpoint I Have Impress.js], Paulund, Updated: March 31st, 2013
+; Data-x attributes
+* The data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation by scripts. ([https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* MDN, March 2018])
+* [https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes 3.2.3.8 Embedding custom non-visible data with the data-* attributes]
 ; CSS transformation (on which impress.js is based)
+* [[CSS transforms tutorial]] (this wiki)
 * [http://dev.w3.org/csswg/css-transforms/#transform CSS Transforms Level 1], W3C working draft
 * [https://developer.mozilla.org/en/CSS/transform CSS transform] documentation at mozilla.org.
@@ Line 314: / Line 355: @@
 * Rakhitha Nimesh Ratnayake (2013), [http://www.packtpub.com/building-impressive-presentations-with-impressjs/book Building Impressive Presentations with impress.js], Packt Publishers, ISBN 1849696489
+; Alternatives
+* https://github.com/hakimel/reveal.js
 [[Category: Web technologies]]
 [[Category: JavaScript]]
 [[Category: Presentation software]]
+[[fr:Tutoriel impress.js]]

Impress.js: Difference between revisions

Latest revision as of 22:18, 18 March 2018

Contents

Introduction

Presentation of the library

Files

Structure of an impress.js presentation

Positioning, rotation and scaling with HTML attributes

The default style sheet

Transition mechanics

A simple example

Requirements

Overview of the impress-min-presi CSS

Links

Navigation menu

Impress.js: Difference between revisions

Latest revision as of 22:18, 18 March 2018

Introduction

Presentation of the library

Files

Structure of an impress.js presentation

Positioning, rotation and scaling with HTML attributes

The default style sheet

Transition mechanics

A simple example

Requirements

Overview of the impress-min-presi CSS

Links

Navigation menu

Slow Search