Example Presentation:
Classic Slides
Henrik Ingo
2015
Table of Contents
- A title slide
- Table of Contents
- Text slide
- Bullet points
- Blockquote & image
- More basic text styles
- Motion effects 101
- Add-ons
- More info
Table of Contents, with links to other slides of this same presentation.
Note that instead of absolute positioning we use relative positioning, with the data-rel-x and data-rel-y attributes. This means the step is positioned relative to the foregoing step. In other words, this is equivalent to data-x="0" data-y="-3000".
A slide with text
This slide has a few paragraphs
(p element) of normal text.
Personally I like centered or even justified text, as it looks less boring. This can of course be set in the css file.
I really like the style on links in these presentations. I modified the border to be beveled, but it's mostly from @bartaz' original demo. @bartaz is the creator of impress.js.
Bullet points
- A slide with bullet points. This is the first point.
- Second point
- Third point. Under this point we also have some sub-bullets:
- Sub-bullet 1
- Sub-bullet 2
A blockquote & image
Spread love everywhere you go.
Let no one ever come to you without leaving happier.Mother Teresa
Image credit: Peta_de_Aztlan@Flickr. CC-BY 2.0
More text styles
As usual, use em to emphasize,
strong for strong, u for underline,
strike for strikethrough and q for inline quotations
.
If you're a software engineer like me, you will often use the
<code> tag for monospaced inline text.
Motion effects 101
Items on the slide can
Fly in
Fade in
And zoom in
...just like in PowerPoint. Yeah, I know I'm being lame, but it was fun to learn to do this in CSS3.
This step here doesn't introduce anything new when it comes to data attributes, but you should notice in the demo that some words of this text are being animated. It's a very basic CSS transition that is applied to the elements when this step element is reached.
At the very beginning of the presentation all step elements are given the class of `future`. It means that they haven't been visited yet.
When the presentation moves to given step `future` is changed to `present` class name. That's how animation on this step works - text moves when the step has `present` class.
Finally when the step is left the `present` class is removed from the element and `past` class is added.
So basically every step element has one of three classes: `future`, `present` and `past`. Only one current step has the `present` class.
Add-ons
This version of impress.js includes several add-ons, striving to make this a full featured presentation app.
Impress.js plugins
- A new plugin framework allows for rich extensibility,
without bloating the core rendering library.
- Press 'P' to open a presenter console.
- When you move the mouse, navigation controls are visible on your bottom left
- Autoplay makes the slides advance after a timeout
- Relative positioning plugin is often a more convenient way to position your slides when editing. (See html for this presentation.)
This presentation also uses speaker notes. They are not visible in the presentation, but shown in the impress console.
If you pressed P only now, this is the first time you see these notes. In fact, there has been notes on preceding slides as well. You can use the navigation controls at the bottom of the impress console to browse back to them.
And did you notice how those bullet points appear one by one as you press space/arrow? That's another plugin, called substeps.
Highlight.js
// `init` API function that initializes (and runs) the presentation.
var init = function () {
if (initialized) { return; }
execPreInitPlugins();
// First we set up the viewport for mobile devices.
// For some reason iPad goes nuts when it is not done properly.
var meta = $("meta[name='viewport']") || document.createElement("meta");
meta.content = "width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no";
if (meta.parentNode !== document.head) {
meta.name = 'viewport';
document.head.appendChild(meta);
}
The Highlight.js library provides really nice color coding of source code. It automatically applies to any code inside a <pre><code> element.
Highlight.js is found under the extras/ directory, since it is an independent third party plugin, not really an impress.js plugin. You have to include it via it's own <link> and <script> tags.
Mermaid.js
diagrams) B[Provided by
mermaid.js] C{Already
know
mermaid?} D(Tutorial) E(Great, hope you enjoy!) A-->B B-->C C--No-->D C--Yes-->E classDef startEnd fill:#fcc,stroke:#353,stroke-width:2px; class A,D,E startEnd;
MathJax.js
Use \(\LaTeX\), MathML or AsciiMath to properly show mathematical formula.
- Remember, in impress.js the full power of HTML5, CSS3 & JavaScript is always at your fingertips!
- For example, you can use tables, forms, or dynamic charts as you would on any web page:
Acme Inc Quarterly Profits
| Q1 | 234€ |
| Q2 | 255€ |
| Q3 | € (insert here) |
| Q4 | € |
More info
- DOCUMENTATION.md is the API reference.
- Source of this presentation itself is commented
- Advanced Impress.js demo by @bartaz
- More examples and demos:
- examples/ in this repository
- on the impress.js wiki
- Check out Impressionist: a 3D GUI to create impress.js presentations