-
Notifications
You must be signed in to change notification settings - Fork 6.7k
/
index.html
491 lines (423 loc) · 23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
<!doctype html>
<!--
This is a simple example / template impress.js slide show. The goal is to be
easier to read for a first timer than the official and very feature rich
demo by bartaz (http://bartaz.github.io/impress.js/). It's also a very
traditional presentation that looks like slides (square screens with bullet
points...), again to make a first timer feel more at home. From this simple
presentation you can then go on to more powerful impress.js presentations!
This example is hopefully helpful for people that want to create both
simple and (eventually) awesome presentations in impress.js and comfortable
doing that directly in HTML.
By: @henrikingo (Still based on the HTML from bartaz' demo.)
-->
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Classic Slides with impress.js | Simple example impress.js slide show | by Henrik Ingo @henrikingo</title>
<meta name="description" content="Simple example impress.js slide show" />
<meta name="author" content="Henrik Ingo" />
<!--
Impress.js doesn't depend on any external stylesheets. It adds all of the styles it needs for the
presentation to work.
However, some of the `extras/` modules do come with their own CSS, and we load
them here. You can read about each extras module separately in their directory.
-->
<link rel="stylesheet" href="../../extras/highlight/styles/github.css">
<link rel="stylesheet" href="../../extras/mermaid/mermaid.forest.css">
<!-- This file contains common styles for example presentations. -->
<link href="../../css/impress-common.css" rel="stylesheet" />
<!--
This file contains styles specific for this example presentation.
-->
<link href="css/classic-slides.css" rel="stylesheet" />
</head>
<!--
Body element is used by impress.js to set some useful class names, that will allow you to detect
the support and state of the presentation in CSS or other scripts.
First very useful class name is `impress-not-supported`. This class means, that browser doesn't
support features required by impress.js, so you should apply some fallback styles in your CSS.
It's not necessary to add it manually on this element. If the script detects that browser is not
good enough it will add this class, but keeping it in HTML means that users without JavaScript
will also get fallback styles.
When impress.js script detects that browser supports all required features, this class name will
be removed.
Another class name on body element also depends on currently active presentation step.
-->
<body class="impress-not-supported">
<!--
This fallback message is only visible when there is `impress-not-supported` class on body.
-->
<div class="fallback-message">
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
<!--
This is the core element used by impress.js: the wrapper for your presentation steps.
In this element all the impress.js magic happens.
data-transition-duration sets the time in microseconds that is used for the
animation when transtitioning between slides.
The width, height, scale and perspective options define a target screen size that you should
design your CSS against. impress.js will automatically scale all content to different screen
sizes. See DOCUMENTATION.md for details. Below, I have targeted full HD screen resolution.
data-autoplay can be used to set the time in seconds, after which presentation
automatically moves to next slide. It can also be set individually for each
slide, but here we just set a common duration for all slides.
-->
<div id="impress"
data-transition-duration="1000"
data-width="1920"
data-height="1080"
data-max-scale="3"
data-min-scale="0"
data-perspective="1000"
data-autoplay="10">
<!--
Each step of the presentation should be an element inside the `#impress` with a class name
of `step`. These step elements are positioned, rotated and scaled by impress.js, and
the 'camera' shows them on each step of the presentation.
The `id` attribute of the step element is used to identify it in the URL, but it's optional.
If it is not defined, it will get a default value of `step-N` where N is a number of slide.
This step is auto-assigned the id "step-1". You can also use `#step-1` in a link, to
point directly to this particular step.
Positioning information is passed through data-* attributes.
In the example below we only specify x and y position of the step element with `data-x="-1000"`
and `data-y="-1500"` attributes. This means that **the center** of the element (yes, the center)
will be positioned in point x = -1000px and y = -1500px of the presentation 'canvas'. It will not
be rotated or scaled.
The "step" class is what *must* be used for every "slide". In this example we also use the "slide"
class, which adds a rectangle with some background and makes this presentation look like a traditional
powerpoint slide show. The "slide" class is entirely optional and indeed you wouldn't use it for
your cooler impress.js presentations.
-->
<div class="step slide title" data-x="-2200" data-y="-3000">
<h1>Example Presentation: <br />
Classic Slides</h1>
<h2>Henrik Ingo</h2>
<h3>2015</h3>
<div class="notes">
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!
</div>
</div>
<div id="toc" class="step slide" data-rel-x="2200" data-rel-y="0">
<h1>Table of Contents</h1>
<ul>
<li><a href="#step-1">A title slide</a></li>
<li><a href="#step-2">Table of Contents</a></li>
<li><a href="#step-3">Text slide</a></li>
<li><a href="#step-4">Bullet points</a></li>
<li><a href="#step-5">Blockquote & image</a></li>
<li><a href="#step-6">More basic text styles</a></li>
<li><a href="#step-7">Motion effects 101</a></li>
<li><a href="#addons">Add-ons</a></li>
<li><a href="#moreinfo">More info</a></li>
</ul>
<div class="notes">
<p>Table of Contents, with links to other slides of this same presentation.</p>
<p>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="-3000".</p>
</div>
</div>
<div class="step slide">
<h1>A slide with text</h1>
<p>This slide has a few paragraphs <br />(p element) of normal text.</p>
<p>Personally I like centered or even justified text, as it looks less boring. This can of course be set in <a href="css/classic-slides.css">the css file</a>.</p>
<p>I really like the style on links in these presentations. I modified the border to be beveled, but it's mostly from <a href="http://impress.github.io/impress.js/">@bartaz' original demo</a>. <a href="https://twitter.com/bartaz">@bartaz</a> is the creator of impress.js.</p>
<div class="notes">
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.
</div>
</div>
<div class="step slide">
<h1>Bullet points</h1>
<ul>
<li>A slide with bullet points. This is the first point.</li>
<li>Second point</li>
<li>Third point. Under this point we also have some sub-bullets:
<ul>
<li>Sub-bullet 1</li>
<li>Sub-bullet 2</li>
</ul>
</li>
</ul>
<div class="notes">
</div>
</div>
<!--
This element introduces rotation.
Notation shouldn't be a surprise. We use `data-rotate="30"` attribute, meaning that this
element should be rotated by 30 degrees clockwise.
-->
<div class="step slide" data-rel-position="relative" data-rel-x="2200" data-rel-y="600" data-rel-rotate-z="30">
<h1>A blockquote & image</h1>
<img src="images/3476636111_c551295ca4_b.jpg"
alt="Mother Teresa holding a newborn baby"
class="right"/>
<blockquote>
Spread love everywhere you go. <br />Let no one ever come to you without leaving happier.
<p style="text-align: right">Mother Teresa</p>
<p class="left bottom"><small>Image credit: <a href="https://www.flickr.com/photos/peta-de-aztlan/3476636111/">Peta_de_Aztlan</a>@Flickr. CC-BY 2.0</small></p>
</blockquote>
<div class="notes">
We use <code>data-rel-position="relative"</code> to make <code>data-rel-rotate-*</code> work,
and make <code>data-rel-x/data-rel-y/data-rel-y</code> be calculated at the coordination related to previous slide.
The relative position and rotation will be inherited by following slides,
so it's not necessary to repeat it again and again.
</div>
</div>
<div class="step slide">
<h1>More text styles</h1>
<p>As usual, use <em>em</em> to emphasize, <br />
<strong>strong</strong> for strong, <u>u</u> for underline,<br />
<strike>strike</strike> for strikethrough and <q>q for inline quotations</q>.</p>
<p>If you're a software engineer like me, you will often use the
<code><code></code> tag for monospaced inline text.</p>
<div class="notes">
</div>
</div>
<div id="motions" class="step slide">
<h1>Motion effects 101</h1>
<p>Items on the slide can</p>
<p class="fly-in fly-out">Fly in</p>
<p class="fade-in fade-out" style="transition-delay: 2s">Fade in</p>
<p class="zoom-in zoom-out" style="transition-delay: 4s">And zoom in</p>
<p class="left bottom"><small>...just like in PowerPoint. Yeah, I know I'm being lame, but it was fun to learn to do this in CSS3.</small></p>
<div class="notes">
<p>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.
</p><p>
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.
</p><p>
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.
</p><p>
Finally when the step is left the `present` class is removed from the element and `past`
class is added.
</p><p>
So basically every step element has one of three classes: `future`, `present` and `past`.
Only one current step has the `present` class.
</p>
</div>
</div>
<div id="zoom" class="step" data-rel-reset data-rel-x="-0.25w" data-rel-y="0.5h" data-scale="0.5">
<div class="notes">
<p>This step zoom in to left bottom of previous slide to see to small text.</p>
<p>It's a empty and transparent.</p>
<p><code>data-rel-reset</code> is used to prevent this step from inheriting the relative positioning from previous slide.</p>
</div>
</div>
<div id="addons" class="step slide title" data-rel-to="motions">
<h2>Add-ons</h2>
<div class="notes">
<p>This version of impress.js includes several add-ons, striving to make this a
full featured presentation app.</p>
<p>The previous step breaks the slide flow, changes the relative position and rotation.</p>
<p>This slide use <code>data-rel-to</code> to inherit relative position and rotation from the slide before previous slide.</p>
</div>
</div>
<div class="step slide" data-autoplay="3">
<h1>Impress.js plugins</h1>
<ul>
<li>A new <a href="https://github.com/impress/impress.js/blob/master/src/plugins/README.md">plugin framework</a> allows for rich extensibility,
without bloating the core rendering library.
<ul>
<li class="substep">Press 'P' to open a presenter console.</li>
<li class="substep">When you move the mouse, navigation controls are visible on your bottom right</li>
<li class="substep">Autoplay makes the slides advance after a timeout</li>
<li class="substep">Relative positioning plugin is often a more convenient way to position your slides when editing. (<a href="https://github.com/impress/impress.js/blob/master/examples/classic-slides/index.html">See html for this presentation.</a>)</li>
</ul>
</li>
</ul>
<div class="notes">
<p>This presentation also uses speaker notes. They are not visible in the presentation, but shown in the impress console.</p>
<p>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.</p>
<p>And did you notice how those bullet points appear one by one as you press space/arrow? That's another plugin, called substeps.</p>
</div>
</div>
<div class="step slide">
<h1>Highlight.js</h1>
<pre><code>
// `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);
}
</code></pre>
<div class="notes">
<p>The Highlight.js library provides really nice color coding of source code.
It automatically applies to any code inside a <pre><code> element.</p>
<p>Highlight.js is found under the <a href="https://github.com/impress/impress.js/tree/master/extras">extras/</a>
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.</p>
</div>
</div>
<div class="step slide">
<h1>Mermaid.js</h1>
<div class="mermaid">
%% This is a comment in mermaid markup
graph LR
A(Support for<br />diagrams)
B[Provided by<br />mermaid.js]
C{Already<br />know<br />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;
</div>
<h1><a href="http://docs.mathjax.org/en/latest/start.html">MathJax.js</a></h1>
<p>Use \(\LaTeX\), MathML or AsciiMath to properly show mathematical formula.</p>
<div class="notes">
Mermaid.js, likewise in <a href="https://github.com/impress/impress.js/tree/master/extras">extras/</a>
directory, draws SVG diagrams from a MarkDown-like syntax. To learn
more about it <a href="http://knsv.github.io/mermaid/index.html#usage">read the fine manual</a>.
</div>
</div>
<div id="markdown" class="step slide markdown">
# 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 where you generate a new
html file on the command line.
* [A more advanced Markdown presentation is here.](../markdown/)
</div>
<div id="acme" class="step slide">
<ul>
<li>Remember, in <em>impress.js</em> the full power of HTML5, CSS3 & JavaScript is always at your fingertips!</li>
<li>For example, you can use tables, forms, or dynamic charts as you would on any web page:</li>
</ul>
<h2>Acme Inc Quarterly Profits</h2>
<!-- Improvised bar graph of divs, to avoid copying something like NVD3 into the repo. -->
<div id="acme-graph">
<div id="acme-graph-bars">
<div id="acme-graph-q1"></div>
<div id="acme-graph-q2"></div>
<div id="acme-graph-q3"></div>
<div id="acme-graph-q4"></div>
</div>
<div id="acme-graph-bottom"></div>
</div>
<table border="1">
<tr><td>Q1</td><td id="acme-q1">234€</td></tr>
<tr><td>Q2</td><td id="acme-q2">255€</td></tr>
<tr><td>Q3</td><td><input id="acme-q3" size="5" oninput="acmeDrawGraph();" />€ <small>(insert here)</small></td></tr>
<tr><td>Q4</td><td><input id="acme-q4" size="5" oninput="acmeDrawGraph();" />€</td></tr>
</table>
<div class="notes">
</div>
</div>
<script type="text/javascript">
var acmeDrawGraph = function() {
var profits = {};
// Q1-Q2: get innerHTML, remove €
var value = document.getElementById('acme-q1').innerHTML;
if( value[value.length-1] == "€" ) value = value.substring(0, value.length-1);
profits['q1'] = value;
var value = document.getElementById('acme-q2').innerHTML;
if( value[value.length-1] == "€" ) value = value.substring(0, value.length-1);
profits['q2'] = value;
// Q3-Q4: get input.value
profits['q3'] = document.getElementById('acme-q3').value;
profits['q4'] = document.getElementById('acme-q4').value;
// Convert all to numeric value, and remember max value for scaling purposes.
var max = profits['q1'];
for ( var q in profits ) {
profits[q] = isNaN(profits[q]) ? 0 : Number(profits[q]);
if( profits[q] > max ) {
max = profits[q];
}
}
// Draw the bar graph
for ( var q in profits ) {
var h = 300 * profits[q] / max;
var div = document.getElementById('acme-graph-'+q);
div.style = 'height: ' + h + 'px';
}
};
// This draws the first 2 bars during page load
acmeDrawGraph();
</script>
<!--
This step also sets a custom data-transition-duration. All of the above steps used the value set
in the root div#impress element, but it is also allowed to set it for each step. Since transitioning
to this step will rotate twice around it's axis, we give the transition a bit more time here.
-->
<div id="moreinfo" class="step slide" data-x="4400" data-y="1200" data-rotate="720" data-transition-duration="2000">
<h1>More info</h1>
<ul>
<li><a href="https://github.com/impress/impress.js/blob/master/DOCUMENTATION.md">DOCUMENTATION.md</a> is the API reference.
</li>
<li><a href="https://github.com/impress/impress.js/blob/master/examples/classic-slides/index.html">Source of this presentation itself</a> is commented</li>
<li><a href="http://impress.github.io/impress.js/">Advanced Impress.js demo</a> by <a href="http://twitter.com/bartaz">@bartaz</a>
<ul>
<li>Again, the <a href="http://github.com/impress/impress.js/blob/master/index.html">html</a>
and <a href="https://github.com/impress/impress.js/blob/master/css/impress-demo.css">css</a> source is well commented.</li>
</ul>
</li>
<li>More examples and demos:
<ul>
<li><a href="https://github.com/impress/impress.js/tree/master/examples">examples/</a> in this repository</li>
<li><a href="https://github.com/impress/impress.js/wiki/Examples-and-demos">on the impress.js wiki</a></li>
</ul>
</li>
<li>Check out <a href="https://github.com/impress/impressionist">Impressionist</a>: a 3D GUI to create impress.js presentations</li>
</ul>
<div class="notes">
</div>
</div>
<!-- This last, empty "slide" is set to be very large using the data-scale attribute,
so that it covers all the other slides you just saw.
It's a common way of zooming out at the end, to show the whole presentation.
In CSS, we set pointer-events:none to make this slide non-clickable.
It makes a difference at least for SVG content, such as the mermaid diagram. -->
<div id="overview" class="step" data-x="4500" data-y="1500" data-scale="10" style="pointer-events: none;">
</div>
</div>
<!--
Add navigation-ui controls: back, forward and a select list.
Add a progress indicator bar (current step / all steps)
Add the help popup plugin
-->
<div id="impress-toolbar"></div>
<div class="impress-progressbar"><div></div></div>
<div class="impress-progress"></div>
<div id="impress-help"></div>
<!-- Extra modules
Load highlight.js, mermaid.js, markdown.js and MathJax.js from extras.
If you're curious about details, these are initialized in src/plugins/extras/extras.js -->
<script type="text/javascript" src="../../extras/highlight/highlight.pack.js"></script>
<script type="text/javascript" src="../../extras/mermaid/mermaid.min.js"></script>
<script type="text/javascript" src="../../extras/markdown/markdown.js"></script>
<script type="text/javascript" src="../../extras/mathjax/MathJax.js?config=TeX-AMS_CHTML"></script>
<!--
To make all described above really work, you need to include impress.js in the page.
You also need to call a `impress().init()` function to initialize impress.js presentation.
And you should do it in the end of your document.
-->
<script type="text/javascript" src="../../js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>