From 7505838891f86a7fe15e0c039e0d952cb2b00a11 Mon Sep 17 00:00:00 2001 From: Henrik Ingo Date: Mon, 30 Oct 2017 19:13:33 +0200 Subject: [PATCH] Use autoplay and toolbar plugins in the main impress demo For all the other features, see demos under extras/ --- DOCUMENTATION.md | 5 +++++ css/impress-demo.css | 38 ++++++++++++++++++++++++++++++++++---- index.html | 31 +++++++++++++++++++++++++------ 3 files changed, 64 insertions(+), 10 deletions(-) diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md index e8a7238..a6e041d 100644 --- a/DOCUMENTATION.md +++ b/DOCUMENTATION.md @@ -82,6 +82,11 @@ Define the pixel based position in which the **center** of the [Step Element](#s ``` +**Note:** The introduction of the [rel](src/plugins/rel/README.md) plugin includes a slight backward incompatible change. +Previously the default value for `data-x`, `data-y` and `data-z` was zero. The `rel` plugin changes the default to inherit +the value of the previous slide. This means, you need to explicitly set these values to zero, if they ever were non-zero. + + #### 3D Rotation (data-rotate-x, data-rotate-y, data-rotate-z) You can not only position a [Step Element](#step-element) in 3D, but also rotate it around any axis. diff --git a/css/impress-demo.css b/css/impress-demo.css index fb97f04..e478573 100644 --- a/css/impress-demo.css +++ b/css/impress-demo.css @@ -268,7 +268,7 @@ a:focus { } #title h1 { - font-size: 190px; + font-size: 180px; -webkit-transform: translateZ(50px); -moz-transform: translateZ(50px); @@ -294,6 +294,7 @@ a:focus { line-height: 1; } +#big strong, #big b { display: block; font-size: 250px; @@ -527,6 +528,35 @@ a:focus { cursor: pointer; } +/* + This version of impress.js supports plugins, and in particular, a UI toolbar + plugin that allows easy navigation between steps and autoplay. +*/ +.impress-enabled div#impress-toolbar { + position: fixed; + right: 1px; + bottom: 1px; + opacity: 0.6; +} +.impress-enabled div#impress-toolbar > span { + margin-right: 10px; +} + +/* + With help from the mouse-timeout plugin, we can hide the toolbar and + have it show only when you move/click/touch the mouse. +*/ +body.impress-mouse-timeout div#impress-toolbar { + display: none; +} + +/* + In fact, we can hide the mouse cursor itself too, when mouse isn't used. +*/ +body.impress-mouse-timeout { + cursor: none; +} + /* Now, when we have all the steps styled let's give users a hint how to navigate @@ -682,9 +712,9 @@ a:focus { So use it wisely ... or don't use at all. */ -.impress-enabled { pointer-events: none } -.impress-enabled #impress { pointer-events: auto } - +.impress-enabled { pointer-events: none } +.impress-enabled #impress { pointer-events: auto } +.impress-enabled #impress-toolbar { pointer-events: auto } /* There is one funny thing I just realized. diff --git a/index.html b/index.html index 5751db1..b0b9cef 100644 --- a/index.html +++ b/index.html @@ -143,8 +143,12 @@ But as I said, you won't need it for now, so don't worry - there are some simple but interesting things right around the corner of this tag ;) + ---------- + Plugins: We set the default time for autoplay plugin to 6 seconds. Autoplay will automatically advance + to next slide after a timeout expires. + --> -
+
-
+
Aren’t you just bored with all those slides-based presentations?
@@ -256,8 +263,12 @@ So basically every step element has one of three classes: `future`, `present` and `past`. Only one current step has the `present` class. + Note: data-x/y/z attributes, if not defined, by default will inherit the value of the + previous step. So to get back to 0 on the z-axis, we must set it to 0. + See src/plugins/rel/README.md for more information. + --> -
+

by positioning, rotating and scaling them on an infinite canvas

@@ -267,7 +278,7 @@

want to know more?

- use the source, Luke! + use the source, Luke!
@@ -306,11 +317,18 @@ CSS transfrom docs: https://developer.mozilla.org/en/CSS/transform --> -
+
+ +
+
-

Use a spacebar or arrow keys to navigate

+

Use a spacebar or arrow keys to navigate.
+ Press 'P' to launch speaker console.