Impress.js: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 105: Line 105:
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 element. In other words, do not expect to see default rendering. For example, an <code><nowiki><ul> <li> </li> </ul></nowiki></code> will not produce bullets. It then defines some classes and id's that are useful to have for styling a "slide".  
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 element. In other words, do not expect to see default rendering. For example, an <code><nowiki><ul> <li> </li> </ul></nowiki></code> will not produce bullets. It 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]
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 [http://tecfa.unige.ch/guides/impress.js/impress-0-5-3/original-index.html demo] file (originally) called index.html.


Classes you could use:
; slide class
 
;slide class
: The <code>slide</code> class will make the slide look a slide
: The <code>slide</code> class will make the slide look a slide
: By default it has rounded corners, light background
: By default it has rounded corners, light background
Line 115: Line 113:
: The HTML <code>q</code> tag is made big.
: The HTML <code>q</code> tag is made big.


;title id
; id=title
: The <code>title</code> defines a title style
: The <code>title</code> defines the style for the first step that has id=title
: In particular it refines h1 to be big.
: In particular it refines h1 to be big.
; id=big
: Styles the slide for big ideas
: The <code>b</code> tag has a size of 250px
Some HTML fragment:
<source lang="html5">
<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>
</source>
Try it: [http://tecfa.unige.ch/guides/impress.js/impress-0-5-3/minimalistic-with-style.html 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 ===
=== Transition mechanics ===

Revision as of 19:50, 25 August 2013

Draft

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"

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 element. In other words, do not expect to see default rendering. For example, an <ul> <li> </li> </ul> will not produce bullets. It 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

Some HTML fragment: 

<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 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
Tutorials
CSS transformation (on which impress.js is based)
Books
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Impress.js&oldid=46025"