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