Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Example Presentation: Classic Slides

Henrik Ingo

2015

Any element with the class="notes" will not be displayed. This can be used for speaker notes. In fact, the impressConsole plugin will show it in the speaker console!

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="-1500".

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.

In this slide, we don't even specify the relative position, rather that too is inherited. So this slide will again be 1000px to the right of the previous one.

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

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

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.

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";
meta.name = 'viewport';
}


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

%% This is a comment in mermaid markup graph LR A(Support for
diagrams) B[Provided by
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.