janishutz-legacy/impress.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use autoplay and toolbar plugins in the main impress demo

Browse Source 
For all the other features, see demos under extras/
This commit is contained in:
Henrik Ingo
2017-10-30 19:13:33 +02:00
parent ff036a5dbd
commit 7505838891
3 changed files with 64 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
index.html
View File

@@ -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.
-->
<div id="impress">
<div id="impress" data-autoplay="7">
<!--
@@ -162,8 +166,11 @@
It will not be rotated or scaled.
--------
Plugins: For first slide, set the autoplay time to a custom 10 seconds.
-->
<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
<div id="bored" class="step slide" data-x="-1000" data-y="-1500" data-autoplay="10">
<q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
</div>
@@ -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.
-->
<div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
<div id="ing" class="step" data-x="3500" data-y="-850" data-z="0" data-rotate="270" data-scale="6">
<p>by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and <b class="scaling">scaling</b> them on an infinite canvas</p>
</div>
@@ -267,7 +278,7 @@
<div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
<p>want to know more?</p>
<q><a href="http://github.com/bartaz/impress.js">use the source</a>, Luke!</q>
<q><a href="http://github.com/henrikingo/impress.js">use the source</a>, Luke!</q>
</div>
<div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
@@ -306,11 +317,18 @@
CSS transfrom docs: https://developer.mozilla.org/en/CSS/transform
-->
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
<div id="overview" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10">
</div>
</div>
<!--
This is a UI plugin. You can read more about plugins in src/plugins/README.md.
For now, I'll just tell you that this adds some graphical controls to navigate the
presentation. In the CSS file you can style them as you want. We've put them bottom right.
-->
<div id="impress-toolbar"></div>
<!--
Hint is not related to impress.js in any way.
@@ -336,7 +354,8 @@
-->
<div class="hint">
<p>Use a spacebar or arrow keys to navigate</p>
<p>Use a spacebar or arrow keys to navigate. <br/>
Press 'P' to launch speaker console.</p>
</div>
<script>
if ("ontouchstart" in document.documentElement) {