# Classic Slides with impress.js | Simple example impress.js slide show | by Henrik Ingo @henrikingo
Simple example impress.js slide show
Author: Henrik Ingo

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!

# 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="-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

> 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

%% This is a comment in mermaid markup graph LR A(Support for
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.

Mermaid.js, likewise in a href="https://github.com/impress/impress.js/tree/master/extras">extras/ directory, draws SVG diagrams from a MarkDown-like syntax. To learn more about it read the fine manual.
# Markdown.js * [Markdown.js](https://github.com/evilstreak/markdown-js) integration: for authors in a hurry! * ...or lazy ;-) * Jot down bullet points in *Markdown* * ...have it automatically converted to HTML * Markdown is converted into a presentation client side, in the browser. This is unlike existing tools like [Hovercraft](https://github.com/regebro/hovercraft) and [markdown-impress](http://binbinliao.com/markdown-impress/) where you generate a new html file on the command line. * [A more advanced Markdown presentation is here.](../markdown/)

- 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
  - Again, the html and css source is well commented.
- More examples and demos:
  - examples/ in this repository
  - on the impress.js wiki
- Check out Impressionist: a 3D GUI to create impress.js presentations