summaryrefslogtreecommitdiff
path: root/reveal.js/demo.html
diff options
context:
space:
mode:
Diffstat (limited to 'reveal.js/demo.html')
-rw-r--r--reveal.js/demo.html443
1 files changed, 331 insertions, 112 deletions
diff --git a/reveal.js/demo.html b/reveal.js/demo.html
index 39b014d..20ed6cd 100644
--- a/reveal.js/demo.html
+++ b/reveal.js/demo.html
@@ -1,47 +1,58 @@
1<!doctype html> 1<!DOCTYPE html>
2<html lang="en"> 2<html lang="en">
3
4 <head> 3 <head>
5 <meta charset="utf-8"> 4 <meta charset="utf-8" />
6 5
7 <title>reveal.js – The HTML Presentation Framework</title> 6 <title>reveal.js – The HTML Presentation Framework</title>
8 7
9 <meta name="description" content="A framework for easily creating beautiful presentations using HTML"> 8 <meta
10 <meta name="author" content="Hakim El Hattab"> 9 name="description"
10 content="A framework for easily creating beautiful presentations using HTML"
11 />
12 <meta name="author" content="Hakim El Hattab" />
11 13
12 <meta name="apple-mobile-web-app-capable" content="yes"> 14 <meta name="mobile-web-app-capable" content="yes" />
13 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 15 <meta name="mobile-web-app-status-bar-style" content="black-translucent" />
14 16
15 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
16 18
17 <link rel="stylesheet" href="dist/reset.css"> 19 <link rel="stylesheet" href="dist/reset.css" />
18 <link rel="stylesheet" href="dist/reveal.css"> 20 <link rel="stylesheet" href="dist/reveal.css" />
19 <link rel="stylesheet" href="dist/theme/black.css" id="theme"> 21 <link rel="stylesheet" href="dist/theme/black.css" id="theme" />
20 22
21 <!-- Theme used for syntax highlighting of code --> 23 <!-- Theme used for syntax highlighting of code -->
22 <link rel="stylesheet" href="plugin/highlight/monokai.css"> 24 <link rel="stylesheet" href="dist/plugin/highlight/monokai.css" />
23 </head> 25 </head>
24 26
25 <body> 27 <body>
26
27 <div class="reveal"> 28 <div class="reveal">
28
29 <!-- Any section element inside of this container is displayed as a slide --> 29 <!-- Any section element inside of this container is displayed as a slide -->
30 <div class="slides"> 30 <div class="slides">
31 <section> 31 <section>
32 <a href="https://revealjs.com"> 32 <a href="https://revealjs.com">
33 <img src="https://static.slid.es/reveal/logo-v1/reveal-white-text.svg" alt="reveal.js logo" style="height: 180px; margin: 0 auto 4rem auto; background: transparent;" class="demo-logo"> 33 <img
34 src="https://static.slid.es/reveal/logo-v1/reveal-white-text.svg"
35 alt="reveal.js logo"
36 style="height: 180px; margin: 0 auto 4rem auto; background: transparent"
37 class="demo-logo"
38 />
34 </a> 39 </a>
35 <h3>The HTML Presentation Framework</h3> 40 <h3>The HTML Presentation Framework</h3>
36 <p> 41 <p>
37 <small>Created by <a href="http://hakim.se">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small> 42 <small
43 >Created by <a href="http://hakim.se">Hakim El Hattab</a> and
44 <a href="https://github.com/hakimel/reveal.js/graphs/contributors"
45 >contributors</a
46 ></small
47 >
38 </p> 48 </p>
39 </section> 49 </section>
40 50
41 <section> 51 <section>
42 <h2>Hello There</h2> 52 <h2>Hello There</h2>
43 <p> 53 <p>
44 reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. 54 reveal.js enables you to create beautiful interactive slide decks using HTML. This
55 presentation will show you examples of what it can do.
45 </p> 56 </p>
46 </section> 57 </section>
47 58
@@ -51,21 +62,38 @@
51 <h2>Vertical Slides</h2> 62 <h2>Vertical Slides</h2>
52 <p>Slides can be nested inside of each other.</p> 63 <p>Slides can be nested inside of each other.</p>
53 <p>Use the <em>Space</em> key to navigate through all slides.</p> 64 <p>Use the <em>Space</em> key to navigate through all slides.</p>
54 <br> 65 <br />
55 <a href="#/2/1" class="navigate-down"> 66 <a href="#/2/1" class="navigate-down">
56 <img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow"> 67 <img
68 class="r-frame"
69 style="background: rgba(255, 255, 255, 0.1)"
70 width="178"
71 height="238"
72 data-src="https://static.slid.es/reveal/arrow.png"
73 alt="Down arrow"
74 />
57 </a> 75 </a>
58 </section> 76 </section>
59 <section> 77 <section>
60 <h2>Basement Level 1</h2> 78 <h2>Basement Level 1</h2>
61 <p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p> 79 <p>
80 Nested slides are useful for adding additional detail underneath a high level
81 horizontal slide.
82 </p>
62 </section> 83 </section>
63 <section> 84 <section>
64 <h2>Basement Level 2</h2> 85 <h2>Basement Level 2</h2>
65 <p>That's it, time to go back up.</p> 86 <p>That's it, time to go back up.</p>
66 <br> 87 <br />
67 <a href="#/2"> 88 <a href="#/2">
68 <img class="r-frame" style="background: rgba(255,255,255,0.1); transform: rotate(180deg);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Up arrow"> 89 <img
90 class="r-frame"
91 style="background: rgba(255, 255, 255, 0.1); transform: rotate(180deg)"
92 width="178"
93 height="238"
94 data-src="https://static.slid.es/reveal/arrow.png"
95 alt="Up arrow"
96 />
69 </a> 97 </a>
70 </section> 98 </section>
71 </section> 99 </section>
@@ -73,37 +101,46 @@
73 <section> 101 <section>
74 <h2>Slides</h2> 102 <h2>Slides</h2>
75 <p> 103 <p>
76 Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="https://slides.com" target="_blank">https://slides.com</a>. 104 Not a coder? Not a problem. There's a fully-featured visual editor for authoring these,
105 try it out at <a href="https://slides.com" target="_blank">https://slides.com</a>.
77 </p> 106 </p>
78 </section> 107 </section>
79 108
80 <section data-visibility="hidden"> 109 <section data-visibility="hidden">
81 <h2>Hidden Slides</h2> 110 <h2>Hidden Slides</h2>
82 <p> 111 <p>
83 This slide is visible in the source, but hidden when the presentation is viewed. You can show all hidden slides by setting the `showHiddenSlides` config option to `true`. 112 This slide is visible in the source, but hidden when the presentation is viewed. You can
113 show all hidden slides by setting the `showHiddenSlides` config option to `true`.
84 </p> 114 </p>
85 </section> 115 </section>
86 116
87 <section data-auto-animate> 117 <section data-auto-animate>
88 <h2 data-id="code-title">Pretty Code</h2> 118 <h2 data-id="code-title">Pretty Code</h2>
89 <pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers> 119 <pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers>
90 import React, { useState } from 'react'; 120 import { useState } from 'react';
91 121
92 function Example() { 122 function Example() {
93 const [count, setCount] = useState(0); 123 const [count, setCount] = useState(0);
94 124
95 return ( 125 return (
96 ... 126
127 ...
128
97 ); 129 );
98 } 130 }
99 </code></pre> 131 </code></pre>
100 <p>Code syntax highlighting courtesy of <a href="https://highlightjs.org/usage/">highlight.js</a>.</p> 132 <p>
133 Code syntax highlighting courtesy of
134 <a href="https://highlightjs.org/usage/">highlight.js</a>.
135 </p>
101 </section> 136 </section>
102 137
103 <section data-auto-animate> 138 <section data-auto-animate>
104 <h2 data-id="code-title">With animations</h2> 139 <h2 data-id="code-title">With Animations</h2>
105 <pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template"> 140 <pre
106 import React, { useState } from 'react'; 141 data-id="code-animation"
142 ><code class="hljs javascript" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template">
143 import { useState } from 'react';
107 144
108 function Example() { 145 function Example() {
109 const [count, setCount] = useState(0); 146 const [count, setCount] = useState(0);
@@ -135,60 +172,92 @@
135 172
136 <section> 173 <section>
137 <h2>Point of View</h2> 174 <h2>Point of View</h2>
175 <p>Press <strong>ESC</strong> to enter the slide overview.</p>
138 <p> 176 <p>
139 Press <strong>ESC</strong> to enter the slide overview. 177 Hold down the <strong>alt</strong> key (<strong>ctrl</strong> in Linux) and click on any
140 </p> 178 element to zoom towards it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>.
141 <p> 179 Click again to zoom back out.
142 Hold down the <strong>alt</strong> key (<strong>ctrl</strong> in Linux) and click on any element to zoom towards it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Click again to zoom back out.
143 </p>
144 <p>
145 (NOTE: Use ctrl + click in Linux.)
146 </p> 180 </p>
181 <p>(NOTE: Use ctrl + click in Linux.)</p>
147 </section> 182 </section>
148 183
149 <section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"> 184 <section
185 data-auto-animate
186 data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"
187 >
150 <h2>Auto-Animate</h2> 188 <h2>Auto-Animate</h2>
151 <p>Automatically animate matching elements across slides with <a href="https://revealjs.com/auto-animate/">Auto-Animate</a>.</p> 189 <p>
190 Automatically animate matching elements across slides with
191 <a href="https://revealjs.com/auto-animate/">Auto-Animate</a>.
192 </p>
152 <div class="r-hstack justify-center"> 193 <div class="r-hstack justify-center">
153 <div data-id="box1" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div> 194 <div
154 <div data-id="box2" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div> 195 data-id="box1"
155 <div data-id="box3" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div> 196 style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px"
197 ></div>
198 <div
199 data-id="box2"
200 style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px"
201 ></div>
202 <div
203 data-id="box3"
204 style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px"
205 ></div>
156 </div> 206 </div>
157 </section> 207 </section>
158 <section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"> 208 <section
209 data-auto-animate
210 data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"
211 >
159 <div class="r-hstack justify-center"> 212 <div class="r-hstack justify-center">
160 <div data-id="box1" data-auto-animate-delay="0" style="background: cyan; width: 150px; height: 100px; margin: 10px;"></div> 213 <div
161 <div data-id="box2" data-auto-animate-delay="0.1" style="background: magenta; width: 150px; height: 100px; margin: 10px;"></div> 214 data-id="box1"
162 <div data-id="box3" data-auto-animate-delay="0.2" style="background: yellow; width: 150px; height: 100px; margin: 10px;"></div> 215 data-auto-animate-delay="0"
216 style="background: cyan; width: 150px; height: 100px; margin: 10px"
217 ></div>
218 <div
219 data-id="box2"
220 data-auto-animate-delay="0.1"
221 style="background: magenta; width: 150px; height: 100px; margin: 10px"
222 ></div>
223 <div
224 data-id="box3"
225 data-auto-animate-delay="0.2"
226 style="background: yellow; width: 150px; height: 100px; margin: 10px"
227 ></div>
163 </div> 228 </div>
164 <h2 style="margin-top: 20px;">Auto-Animate</h2> 229 <h2 style="margin-top: 20px">Auto-Animate</h2>
165 </section> 230 </section>
166 <section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"> 231 <section
232 data-auto-animate
233 data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"
234 >
167 <div class="r-stack"> 235 <div class="r-stack">
168 <div data-id="box1" style="background: cyan; width: 300px; height: 300px; border-radius: 200px;"></div> 236 <div data-id="box1" style="background: cyan; width: 300px; height: 300px"></div>
169 <div data-id="box2" style="background: magenta; width: 200px; height: 200px; border-radius: 200px;"></div> 237 <div data-id="box2" style="background: magenta; width: 200px; height: 200px"></div>
170 <div data-id="box3" style="background: yellow; width: 100px; height: 100px; border-radius: 200px;"></div> 238 <div data-id="box3" style="background: yellow; width: 100px; height: 100px"></div>
171 </div> 239 </div>
172 <h2 style="margin-top: 20px;">Auto-Animate</h2> 240 <h2 style="margin-top: 20px">Auto-Animate</h2>
173 </section> 241 </section>
174 242
175 <section> 243 <section>
176 <h2>Touch Optimized</h2> 244 <h2>Touch Optimized</h2>
177 <p> 245 <p>
178 Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides. 246 Presentations look great on touch devices, like mobile phones and tablets. Simply swipe
247 through your slides.
179 </p> 248 </p>
180 </section> 249 </section>
181 250
182 <section data-markdown> 251 <section data-markdown>
183 <script type="text/template"> 252 <script type="text/template">
184 ## Markdown support 253 ## Markdown Support
185 254
186 Write content using inline or external Markdown. 255 Write content using inline or external Markdown.
187 Instructions and more info available in the [docs](https://revealjs.com/markdown/). 256 Instructions and more info available in the [docs](https://revealjs.com/markdown/).
188 257
189 ```html [] 258 ```html []
190 <section data-markdown> 259 <section data-markdown>
191 ## Markdown support 260 ## Markdown Support
192 261
193 Write content using inline or external Markdown. 262 Write content using inline or external Markdown.
194 Instructions and more info available in the [docs](https://revealjs.com/markdown/). 263 Instructions and more info available in the [docs](https://revealjs.com/markdown/).
@@ -198,6 +267,25 @@
198 </section> 267 </section>
199 268
200 <section> 269 <section>
270 <h2>Lightbox</h2>
271 Turn any element into a <a href="https://revealjs.com/lightbox/">lightbox</a> using <strong>data‑preview‑image</strong> & <strong>data‑preview‑video</strong>.
272 <div class="r-hstack" style="gap: 2rem;">
273 <div>
274 <pre style="font-size: 12px; width: 100%"><code class="html" data-trim>
275 &lt;img src="image.png" data-preview-image="image.png"&gt;
276 </code></pre>
277 <img src="https://static.slid.es/logo/v2/slides-symbol-1024x1024.png" height="100" data-preview-image>
278 </div>
279 <div>
280 <pre style="font-size: 12px; width: 100%"><code class="html" data-trim>
281 &lt;img src="video.png" data-preview-video="video.mp4"&gt;
282 </code></pre>
283 <img src="https://static.slid.es/site/homepage/v1/homepage-video-editor.png" height="100" data-preview-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4">
284 </div>
285 </div>
286 </section>
287
288 <section>
201 <p>Add the <code>r-fit-text</code> class to auto-size text</p> 289 <p>Add the <code>r-fit-text</code> class to auto-size text</p>
202 <h2 class="r-fit-text">FIT TEXT</h2> 290 <h2 class="r-fit-text">FIT TEXT</h2>
203 </section> 291 </section>
@@ -207,7 +295,10 @@
207 <h2>Fragments</h2> 295 <h2>Fragments</h2>
208 <p>Hit the next arrow...</p> 296 <p>Hit the next arrow...</p>
209 <p class="fragment">... to step through ...</p> 297 <p class="fragment">... to step through ...</p>
210 <p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p> 298 <p>
299 <span class="fragment">... a</span> <span class="fragment">fragmented</span>
300 <span class="fragment">slide.</span>
301 </p>
211 302
212 <aside class="notes"> 303 <aside class="notes">
213 This slide has fragments which are also stepped through in the notes window. 304 This slide has fragments which are also stepped through in the notes window.
@@ -220,21 +311,25 @@
220 <p class="fragment shrink">shrink</p> 311 <p class="fragment shrink">shrink</p>
221 <p class="fragment fade-out">fade-out</p> 312 <p class="fragment fade-out">fade-out</p>
222 <p> 313 <p>
223 <span style="display: inline-block;" class="fragment fade-right">fade-right, </span> 314 <span style="display: inline-block" class="fragment fade-right">fade-right, </span>
224 <span style="display: inline-block;" class="fragment fade-up">up, </span> 315 <span style="display: inline-block" class="fragment fade-up">up, </span>
225 <span style="display: inline-block;" class="fragment fade-down">down, </span> 316 <span style="display: inline-block" class="fragment fade-down">down, </span>
226 <span style="display: inline-block;" class="fragment fade-left">left</span> 317 <span style="display: inline-block" class="fragment fade-left">left</span>
227 </p> 318 </p>
228 <p class="fragment fade-in-then-out">fade-in-then-out</p> 319 <p class="fragment fade-in-then-out">fade-in-then-out</p>
229 <p class="fragment fade-in-then-semi-out">fade-in-then-semi-out</p> 320 <p class="fragment fade-in-then-semi-out">fade-in-then-semi-out</p>
230 <p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p> 321 <p>
322 Highlight <span class="fragment highlight-red">red</span>
323 <span class="fragment highlight-blue">blue</span>
324 <span class="fragment highlight-green">green</span>
325 </p>
231 </section> 326 </section>
232 </section> 327 </section>
233 328
234 <section id="transitions"> 329 <section id="transitions">
235 <h2>Transition Styles</h2> 330 <h2>Transition Styles</h2>
236 <p> 331 <p>
237 You can select from different transitions, like: <br> 332 You can select from different transitions, like: <br />
238 <a href="?transition=none#/transitions">None</a> - 333 <a href="?transition=none#/transitions">None</a> -
239 <a href="?transition=fade#/transitions">Fade</a> - 334 <a href="?transition=fade#/transitions">Fade</a> -
240 <a href="?transition=slide#/transitions">Slide</a> - 335 <a href="?transition=slide#/transitions">Slide</a> -
@@ -247,19 +342,73 @@
247 <section id="themes"> 342 <section id="themes">
248 <h2>Themes</h2> 343 <h2>Themes</h2>
249 <p> 344 <p>
250 reveal.js comes with a few themes built in: <br> 345 reveal.js comes with a few themes built in: <br />
251 <!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. --> 346 <!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
252 <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/black.css'); return false;">Black (default)</a> - 347 <a
253 <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;">White</a> - 348 href="#/themes"
254 <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/league.css'); return false;">League</a> - 349 onclick="document.getElementById('theme').setAttribute('href','dist/theme/black.css'); return false;"
255 <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/sky.css'); return false;">Sky</a> - 350 >Black (default)</a
256 <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/beige.css'); return false;">Beige</a> - 351 >
257 <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/simple.css'); return false;">Simple</a> <br> 352 -
258 <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/serif.css'); return false;">Serif</a> - 353 <a
259 <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/blood.css'); return false;">Blood</a> - 354 href="#/themes"
260 <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/night.css'); return false;">Night</a> - 355 onclick="document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;"
261 <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/moon.css'); return false;">Moon</a> - 356 >White</a
262 <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/solarized.css'); return false;">Solarized</a> 357 >
358 -
359 <a
360 href="#/themes"
361 onclick="document.getElementById('theme').setAttribute('href','dist/theme/league.css'); return false;"
362 >League</a
363 >
364 -
365 <a
366 href="#/themes"
367 onclick="document.getElementById('theme').setAttribute('href','dist/theme/sky.css'); return false;"
368 >Sky</a
369 >
370 -
371 <a
372 href="#/themes"
373 onclick="document.getElementById('theme').setAttribute('href','dist/theme/beige.css'); return false;"
374 >Beige</a
375 >
376 -
377 <a
378 href="#/themes"
379 onclick="document.getElementById('theme').setAttribute('href','dist/theme/simple.css'); return false;"
380 >Simple</a
381 >
382 <br />
383 <a
384 href="#/themes"
385 onclick="document.getElementById('theme').setAttribute('href','dist/theme/serif.css'); return false;"
386 >Serif</a
387 >
388 -
389 <a
390 href="#/themes"
391 onclick="document.getElementById('theme').setAttribute('href','dist/theme/blood.css'); return false;"
392 >Blood</a
393 >
394 -
395 <a
396 href="#/themes"
397 onclick="document.getElementById('theme').setAttribute('href','dist/theme/night.css'); return false;"
398 >Night</a
399 >
400 -
401 <a
402 href="#/themes"
403 onclick="document.getElementById('theme').setAttribute('href','dist/theme/moon.css'); return false;"
404 >Moon</a
405 >
406 -
407 <a
408 href="#/themes"
409 onclick="document.getElementById('theme').setAttribute('href','dist/theme/solarized.css'); return false;"
410 >Solarized</a
411 >
263 </p> 412 </p>
264 </section> 413 </section>
265 414
@@ -267,10 +416,18 @@
267 <section data-background="#dddddd"> 416 <section data-background="#dddddd">
268 <h2>Slide Backgrounds</h2> 417 <h2>Slide Backgrounds</h2>
269 <p> 418 <p>
270 Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported. 419 Set <code>data-background="#dddddd"</code> on a slide to change the background color.
420 All CSS color formats are supported.
271 </p> 421 </p>
272 <a href="#" class="navigate-down"> 422 <a href="#" class="navigate-down">
273 <img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow"> 423 <img
424 class="r-frame"
425 style="background: rgba(255, 255, 255, 0.1)"
426 width="178"
427 height="238"
428 data-src="https://static.slid.es/reveal/arrow.png"
429 alt="Down arrow"
430 />
274 </a> 431 </a>
275 </section> 432 </section>
276 <section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)"> 433 <section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
@@ -282,12 +439,19 @@
282 <h2>Image Backgrounds</h2> 439 <h2>Image Backgrounds</h2>
283 <pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre> 440 <pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre>
284 </section> 441 </section>
285 <section data-background="https://static.slid.es/reveal/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px"> 442 <section
443 data-background="https://static.slid.es/reveal/image-placeholder.png"
444 data-background-repeat="repeat"
445 data-background-size="100px"
446 >
286 <h2>Tiled Backgrounds</h2> 447 <h2>Tiled Backgrounds</h2>
287 <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre> 448 <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
288 </section> 449 </section>
289 <section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-background-color="#000000"> 450 <section
290 <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;"> 451 data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4"
452 data-background-color="#000000"
453 >
454 <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px">
291 <h2>Video Backgrounds</h2> 455 <h2>Video Backgrounds</h2>
292 <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre> 456 <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
293 </div> 457 </div>
@@ -297,26 +461,48 @@
297 </section> 461 </section>
298 </section> 462 </section>
299 463
300 <section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom"> 464 <section
465 data-transition="slide"
466 data-background="#4d7e65"
467 data-background-transition="zoom"
468 >
301 <h2>Background Transitions</h2> 469 <h2>Background Transitions</h2>
302 <p> 470 <p>
303 Different background transitions are available via the backgroundTransition option. This one's called "zoom". 471 Different background transitions are available via the backgroundTransition option. This
472 one's called "zoom".
304 </p> 473 </p>
305 <pre><code class="hljs javascript">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre> 474 <pre><code class="hljs javascript">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
306 </section> 475 </section>
307 476
308 <section data-transition="slide" data-background="#b5533c" data-background-transition="zoom"> 477 <section
478 data-transition="slide"
479 data-background="#b5533c"
480 data-background-transition="zoom"
481 >
309 <h2>Background Transitions</h2> 482 <h2>Background Transitions</h2>
310 <p> 483 <p>You can override background transitions per-slide.</p>
311 You can override background transitions per-slide.
312 </p>
313 <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre> 484 <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
314 </section> 485 </section>
315 486
316 <section data-background-iframe="https://hakim.se" data-background-interactive> 487 <section data-background-iframe="https://hakim.se" data-background-interactive>
317 <div style="position: absolute; width: 40%; right: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 5px 25px rgba(0,0,0,0.2); background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px; font-size: 20px; text-align: left;"> 488 <div
489 style="
490 position: absolute;
491 width: 40%;
492 right: 0;
493 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 5px 25px rgba(0, 0, 0, 0.2);
494 background-color: rgba(0, 0, 0, 0.9);
495 color: #fff;
496 padding: 20px;
497 font-size: 20px;
498 text-align: left;
499 "
500 >
318 <h2>Iframe Backgrounds</h2> 501 <h2>Iframe Backgrounds</h2>
319 <p>Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.</p> 502 <p>
503 Since reveal.js runs on the web, you can easily embed other web content. Try
504 interacting with the page in the background.
505 </p>
320 </div> 506 </div>
321 </section> 507 </section>
322 508
@@ -372,11 +558,19 @@
372 <section> 558 <section>
373 <h2>Clever Quotes</h2> 559 <h2>Clever Quotes</h2>
374 <p> 560 <p>
375 These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">The nice thing about standards is that there are so many to choose from</q> and block: 561 These guys come in two forms, inline:
562 <q
563 cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"
564 >The nice thing about standards is that there are so many to choose from</q
565 >
566 and block:
376 </p> 567 </p>
377 <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"> 568 <blockquote
378 &ldquo;For years there has been a theory that millions of monkeys typing at random on millions of typewriters would 569 cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"
379 reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.&rdquo; 570 >
571 &ldquo;For years there has been a theory that millions of monkeys typing at random on
572 millions of typewriters would reproduce the entire works of Shakespeare. The Internet
573 has proven this theory to be untrue.&rdquo;
380 </blockquote> 574 </blockquote>
381 </section> 575 </section>
382 576
@@ -390,18 +584,36 @@
390 584
391 <section> 585 <section>
392 <h2>Speaker View</h2> 586 <h2>Speaker View</h2>
393 <p>There's a <a href="https://revealjs.com/speaker-view/">speaker view</a>. It includes a timer, preview of the upcoming slide as well as your speaker notes.</p> 587 <p>
588 There's a <a href="https://revealjs.com/speaker-view/">speaker view</a>. It includes a
589 timer, preview of the upcoming slide as well as your speaker notes.
590 </p>
394 <p>Press the <em>S</em> key to try it out.</p> 591 <p>Press the <em>S</em> key to try it out.</p>
395 592
396 <aside class="notes"> 593 <aside class="notes">
397 Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard). 594 Oh hey, these are some notes. They'll be hidden in your presentation, but you can see
595 them if you open the speaker notes window (hit 's' on your keyboard).
398 </aside> 596 </aside>
399 </section> 597 </section>
400 598
401 <section> 599 <section>
402 <h2>Export to PDF</h2> 600 <h2>Export to PDF</h2>
403 <p>Presentations can be <a href="https://revealjs.com/pdf-export/">exported to PDF</a>, here's an example:</p> 601 <p>
404 <iframe data-src="https://www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> 602 Presentations can be <a href="https://revealjs.com/pdf-export/">exported to PDF</a>,
603 here's an example:
604 </p>
605 <iframe
606 data-src="https://www.slideshare.net/slideshow/embed_code/42840540"
607 width="445"
608 height="355"
609 frameborder="0"
610 marginwidth="0"
611 marginheight="0"
612 scrolling="no"
613 style="border: 3px solid #666; margin-bottom: 5px; max-width: 100%"
614 allowfullscreen
615 >
616 </iframe>
405 </section> 617 </section>
406 618
407 <section> 619 <section>
@@ -416,7 +628,8 @@
416 <section data-state="customevent"> 628 <section data-state="customevent">
417 <h2>State Events</h2> 629 <h2>State Events</h2>
418 <p> 630 <p>
419 Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name. 631 Additionally custom events can be triggered on a per slide basis by binding to the
632 <code>data-state</code> name.
420 </p> 633 </p>
421 <pre><code class="javascript" data-trim contenteditable style="font-size: 18px;"> 634 <pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
422Reveal.on( 'customevent', function() { 635Reveal.on( 'customevent', function() {
@@ -428,7 +641,8 @@ Reveal.on( 'customevent', function() {
428 <section> 641 <section>
429 <h2>Take a Moment</h2> 642 <h2>Take a Moment</h2>
430 <p> 643 <p>
431 Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen. 644 Press B or . on your keyboard to pause the presentation. This is helpful when you're on
645 stage and want to take distracting slides off the screen.
432 </p> 646 </p>
433 </section> 647 </section>
434 648
@@ -438,33 +652,40 @@ Reveal.on( 'customevent', function() {
438 <li>Right-to-left support</li> 652 <li>Right-to-left support</li>
439 <li><a href="https://revealjs.com/api/">Extensive JavaScript API</a></li> 653 <li><a href="https://revealjs.com/api/">Extensive JavaScript API</a></li>
440 <li><a href="https://revealjs.com/auto-slide/">Auto-progression</a></li> 654 <li><a href="https://revealjs.com/auto-slide/">Auto-progression</a></li>
441 <li><a href="https://revealjs.com/backgrounds/#parallax-background">Parallax backgrounds</a></li> 655 <li>
656 <a href="https://revealjs.com/backgrounds/#parallax-background"
657 >Parallax backgrounds</a
658 >
659 </li>
442 <li><a href="https://revealjs.com/keyboard/">Custom keyboard bindings</a></li> 660 <li><a href="https://revealjs.com/keyboard/">Custom keyboard bindings</a></li>
443 </ul> 661 </ul>
444 </section> 662 </section>
445 663
446 <section style="text-align: left;"> 664 <section style="text-align: left">
447 <h1>THE END</h1> 665 <h1>THE END</h1>
448 <p> 666 <p>
449 - <a href="https://slides.com">Try the online editor</a> <br> 667 - <a href="https://slides.com">Try the online editor</a> <br />
450 - <a href="https://github.com/hakimel/reveal.js">Source code &amp; documentation</a> 668 - <a href="https://github.com/hakimel/reveal.js">Source code &amp; documentation</a>
451 </p> 669 </p>
452 </section> 670 </section>
453
454 </div> 671 </div>
455
456 </div> 672 </div>
457 673
458 <script src="dist/reveal.js"></script> 674 <script src="dist/reveal.js"></script>
459 <script src="plugin/zoom/zoom.js"></script> 675 <script src="dist/plugin/zoom.js"></script>
460 <script src="plugin/notes/notes.js"></script> 676 <script src="dist/plugin/notes.js"></script>
461 <script src="plugin/search/search.js"></script> 677 <script src="dist/plugin/search.js"></script>
462 <script src="plugin/markdown/markdown.js"></script> 678 <script src="dist/plugin/markdown.js"></script>
463 <script src="plugin/highlight/highlight.js"></script> 679 <script src="dist/plugin/highlight.js"></script>
464 <script> 680 <script>
681 // Also available as an ES module, see: https://revealjs.com/initialization/
682 // import Reveal from 'reveal.js';
683 // import RevealZoom from 'reveal.js/plugin/zoom';
684 // import RevealNotes from 'reveal.js/plugin/notes';
685 // import RevealSearch from 'reveal.js/plugin/search';
686 // import RevealMarkdown from 'reveal.js/plugin/markdown';
687 // import RevealHighlight from 'reveal.js/plugin/highlight';
465 688
466 // Also available as an ES module, see:
467 // https://revealjs.com/initialization/
468 Reveal.initialize({ 689 Reveal.initialize({
469 controls: true, 690 controls: true,
470 progress: true, 691 progress: true,
@@ -472,10 +693,8 @@ Reveal.on( 'customevent', function() {
472 hash: true, 693 hash: true,
473 694
474 // Learn about plugins: https://revealjs.com/plugins/ 695 // Learn about plugins: https://revealjs.com/plugins/
475 plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight ] 696 plugins: [RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight],
476 }); 697 });
477
478 </script> 698 </script>
479
480 </body> 699 </body>
481</html> 700</html>
generated by cgit v1.3 (git 2.53.0) at 2026-09-25 09:42:04 +0000