返回 reveal.js
demo.html
根目录 / demo.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8" />
5
6 <title>reveal.js – The HTML Presentation Framework</title>
7
8 <meta
9 name="description"
10 content="A framework for easily creating beautiful presentations using HTML"
11 />
12 <meta name="author" content="Hakim El Hattab" />
13
14 <meta name="mobile-web-app-capable" content="yes" />
15 <meta name="mobile-web-app-status-bar-style" content="black-translucent" />
16
17 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
18
19 <link rel="stylesheet" href="dist/reset.css" />
20 <link rel="stylesheet" href="dist/reveal.css" />
21 <link rel="stylesheet" href="dist/theme/black.css" id="theme" />
22
23 <!-- Theme used for syntax highlighting of code -->
24 <link rel="stylesheet" href="dist/plugin/highlight/monokai.css" />
25 </head>
26
27 <body>
28 <div class="reveal">
29 <!-- Any section element inside of this container is displayed as a slide -->
30 <div class="slides">
31 <section>
32 <a href="https://revealjs.com">
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 />
39 </a>
40 <h3>The HTML Presentation Framework</h3>
41 <p>
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 >
48 </p>
49 </section>
50
51 <section>
52 <h2>Hello There</h2>
53 <p>
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.
56 </p>
57 </section>
58
59 <!-- Example of nested vertical slides -->
60 <section>
61 <section>
62 <h2>Vertical Slides</h2>
63 <p>Slides can be nested inside of each other.</p>
64 <p>Use the <em>Space</em> key to navigate through all slides.</p>
65 <br />
66 <a href="#/2/1" class="navigate-down">
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 />
75 </a>
76 </section>
77 <section>
78 <h2>Basement Level 1</h2>
79 <p>
80 Nested slides are useful for adding additional detail underneath a high level
81 horizontal slide.
82 </p>
83 </section>
84 <section>
85 <h2>Basement Level 2</h2>
86 <p>That's it, time to go back up.</p>
87 <br />
88 <a href="#/2">
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 />
97 </a>
98 </section>
99 </section>
100
101 <section>
102 <h2>Slides</h2>
103 <p>
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>.
106 </p>
107 </section>
108
109 <section data-visibility="hidden">
110 <h2>Hidden Slides</h2>
111 <p>
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`.
114 </p>
115 </section>
116
117 <section data-auto-animate>
118 <h2 data-id="code-title">Pretty Code</h2>
119 <pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers>
120 import { useState } from 'react';
121
122 function Example() {
123 const [count, setCount] = useState(0);
124
125 return (
126
127 ...
128
129 );
130 }
131 </code></pre>
132 <p>
133 Code syntax highlighting courtesy of
134 <a href="https://highlightjs.org/usage/">highlight.js</a>.
135 </p>
136 </section>
137
138 <section data-auto-animate>
139 <h2 data-id="code-title">With Animations</h2>
140 <pre
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';
144
145 function Example() {
146 const [count, setCount] = useState(0);
147
148 return (
149 <div>
150 <p>You clicked {count} times</p>
151 <button onClick={() => setCount(count + 1)}>
152 Click me
153 </button>
154 </div>
155 );
156 }
157
158 function SecondExample() {
159 const [count, setCount] = useState(0);
160
161 return (
162 <div>
163 <p>You clicked {count} times</p>
164 <button onClick={() => setCount(count + 1)}>
165 Click me
166 </button>
167 </div>
168 );
169 }
170 </script></code></pre>
171 </section>
172
173 <section>
174 <h2>Point of View</h2>
175 <p>Press <strong>ESC</strong> to enter the slide overview.</p>
176 <p>
177 Hold down the <strong>alt</strong> key (<strong>ctrl</strong> in Linux) and click on any
178 element to zoom towards it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>.
179 Click again to zoom back out.
180 </p>
181 <p>(NOTE: Use ctrl + click in Linux.)</p>
182 </section>
183
184 <section
185 data-auto-animate
186 data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"
187 >
188 <h2>Auto-Animate</h2>
189 <p>
190 Automatically animate matching elements across slides with
191 <a href="https://revealjs.com/auto-animate/">Auto-Animate</a>.
192 </p>
193 <div class="r-hstack justify-center">
194 <div
195 data-id="box1"
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>
206 </div>
207 </section>
208 <section
209 data-auto-animate
210 data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"
211 >
212 <div class="r-hstack justify-center">
213 <div
214 data-id="box1"
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>
228 </div>
229 <h2 style="margin-top: 20px">Auto-Animate</h2>
230 </section>
231 <section
232 data-auto-animate
233 data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"
234 >
235 <div class="r-stack">
236 <div data-id="box1" style="background: cyan; width: 300px; height: 300px"></div>
237 <div data-id="box2" style="background: magenta; width: 200px; height: 200px"></div>
238 <div data-id="box3" style="background: yellow; width: 100px; height: 100px"></div>
239 </div>
240 <h2 style="margin-top: 20px">Auto-Animate</h2>
241 </section>
242
243 <section>
244 <h2>Touch Optimized</h2>
245 <p>
246 Presentations look great on touch devices, like mobile phones and tablets. Simply swipe
247 through your slides.
248 </p>
249 </section>
250
251 <section data-markdown>
252 <script type="text/template">
253 ## Markdown Support
254
255 Write content using inline or external Markdown.
256 Instructions and more info available in the [docs](https://revealjs.com/markdown/).
257
258 ```html []
259 <section data-markdown>
260 ## Markdown Support
261
262 Write content using inline or external Markdown.
263 Instructions and more info available in the [docs](https://revealjs.com/markdown/).
264 </section>
265 ```
266 </script>
267 </section>
268
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>
289 <p>Add the <code>r-fit-text</code> class to auto-size text</p>
290 <h2 class="r-fit-text">FIT TEXT</h2>
291 </section>
292
293 <section>
294 <section id="fragments">
295 <h2>Fragments</h2>
296 <p>Hit the next arrow...</p>
297 <p class="fragment">... to step through ...</p>
298 <p>
299 <span class="fragment">... a</span> <span class="fragment">fragmented</span>
300 <span class="fragment">slide.</span>
301 </p>
302
303 <aside class="notes">
304 This slide has fragments which are also stepped through in the notes window.
305 </aside>
306 </section>
307 <section>
308 <h2>Fragment Styles</h2>
309 <p>There's different types of fragments, like:</p>
310 <p class="fragment grow">grow</p>
311 <p class="fragment shrink">shrink</p>
312 <p class="fragment fade-out">fade-out</p>
313 <p>
314 <span style="display: inline-block" class="fragment fade-right">fade-right, </span>
315 <span style="display: inline-block" class="fragment fade-up">up, </span>
316 <span style="display: inline-block" class="fragment fade-down">down, </span>
317 <span style="display: inline-block" class="fragment fade-left">left</span>
318 </p>
319 <p class="fragment fade-in-then-out">fade-in-then-out</p>
320 <p class="fragment fade-in-then-semi-out">fade-in-then-semi-out</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>
326 </section>
327 </section>
328
329 <section id="transitions">
330 <h2>Transition Styles</h2>
331 <p>
332 You can select from different transitions, like: <br />
333 <a href="?transition=none#/transitions">None</a> -
334 <a href="?transition=fade#/transitions">Fade</a> -
335 <a href="?transition=slide#/transitions">Slide</a> -
336 <a href="?transition=convex#/transitions">Convex</a> -
337 <a href="?transition=concave#/transitions">Concave</a> -
338 <a href="?transition=zoom#/transitions">Zoom</a>
339 </p>
340 </section>
341
342 <section id="themes">
343 <h2>Themes</h2>
344 <p>
345 reveal.js comes with a few themes built in: <br />
346 <!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
347 <a
348 href="#/themes"
349 onclick="document.getElementById('theme').setAttribute('href','dist/theme/black.css'); return false;"
350 >Black (default)</a
351 >
352 -
353 <a
354 href="#/themes"
355 onclick="document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;"
356 >White</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 >
412 </p>
413 </section>
414
415 <section>
416 <section data-background="#dddddd">
417 <h2>Slide Backgrounds</h2>
418 <p>
419 Set <code>data-background="#dddddd"</code> on a slide to change the background color.
420 All CSS color formats are supported.
421 </p>
422 <a href="#" class="navigate-down">
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 />
431 </a>
432 </section>
433 <section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
434 <h2>Gradient Backgrounds</h2>
435 <pre><code class="hljs html wrap">&lt;section data-background-gradient=
436 "linear-gradient(to bottom, #ddd, #191919)"&gt;</code></pre>
437 </section>
438 <section data-background="https://static.slid.es/reveal/image-placeholder.png">
439 <h2>Image Backgrounds</h2>
440 <pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre>
441 </section>
442 <section
443 data-background="https://static.slid.es/reveal/image-placeholder.png"
444 data-background-repeat="repeat"
445 data-background-size="100px"
446 >
447 <h2>Tiled Backgrounds</h2>
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>
449 </section>
450 <section
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">
455 <h2>Video Backgrounds</h2>
456 <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
457 </div>
458 </section>
459 <section data-background="http://i.giphy.com/90F8aUepslB84.gif">
460 <h2>... and GIFs!</h2>
461 </section>
462 </section>
463
464 <section
465 data-transition="slide"
466 data-background="#4d7e65"
467 data-background-transition="zoom"
468 >
469 <h2>Background Transitions</h2>
470 <p>
471 Different background transitions are available via the backgroundTransition option. This
472 one's called "zoom".
473 </p>
474 <pre><code class="hljs javascript">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
475 </section>
476
477 <section
478 data-transition="slide"
479 data-background="#b5533c"
480 data-background-transition="zoom"
481 >
482 <h2>Background Transitions</h2>
483 <p>You can override background transitions per-slide.</p>
484 <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
485 </section>
486
487 <section data-background-iframe="https://hakim.se" data-background-interactive>
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 >
501 <h2>Iframe Backgrounds</h2>
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>
506 </div>
507 </section>
508
509 <section>
510 <h2>Marvelous List</h2>
511 <ul>
512 <li>No order here</li>
513 <li>Or here</li>
514 <li>Or here</li>
515 <li>Or here</li>
516 </ul>
517 </section>
518
519 <section>
520 <h2>Fantastic Ordered List</h2>
521 <ol>
522 <li>One is smaller than...</li>
523 <li>Two is smaller than...</li>
524 <li>Three!</li>
525 </ol>
526 </section>
527
528 <section>
529 <h2>Tabular Tables</h2>
530 <table>
531 <thead>
532 <tr>
533 <th>Item</th>
534 <th>Value</th>
535 <th>Quantity</th>
536 </tr>
537 </thead>
538 <tbody>
539 <tr>
540 <td>Apples</td>
541 <td>$1</td>
542 <td>7</td>
543 </tr>
544 <tr>
545 <td>Lemonade</td>
546 <td>$2</td>
547 <td>18</td>
548 </tr>
549 <tr>
550 <td>Bread</td>
551 <td>$3</td>
552 <td>2</td>
553 </tr>
554 </tbody>
555 </table>
556 </section>
557
558 <section>
559 <h2>Clever Quotes</h2>
560 <p>
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:
567 </p>
568 <blockquote
569 cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"
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;
574 </blockquote>
575 </section>
576
577 <section>
578 <h2>Intergalactic Interconnections</h2>
579 <p>
580 You can link between slides internally,
581 <a href="#/2/3">like this</a>.
582 </p>
583 </section>
584
585 <section>
586 <h2>Speaker View</h2>
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>
591 <p>Press the <em>S</em> key to try it out.</p>
592
593 <aside class="notes">
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).
596 </aside>
597 </section>
598
599 <section>
600 <h2>Export to PDF</h2>
601 <p>
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>
617 </section>
618
619 <section>
620 <h2>Global State</h2>
621 <p>
622 Set <code>data-state="something"</code> on a slide and <code>"something"</code>
623 will be added as a class to the document element when the slide is open. This lets you
624 apply broader style changes, like switching the page background.
625 </p>
626 </section>
627
628 <section data-state="customevent">
629 <h2>State Events</h2>
630 <p>
631 Additionally custom events can be triggered on a per slide basis by binding to the
632 <code>data-state</code> name.
633 </p>
634 <pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
635 Reveal.on( 'customevent', function() {
636 console.log( '"customevent" has fired' );
637 } );
638 </code></pre>
639 </section>
640
641 <section>
642 <h2>Take a Moment</h2>
643 <p>
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.
646 </p>
647 </section>
648
649 <section>
650 <h2>Much more</h2>
651 <ul>
652 <li>Right-to-left support</li>
653 <li><a href="https://revealjs.com/api/">Extensive JavaScript API</a></li>
654 <li><a href="https://revealjs.com/auto-slide/">Auto-progression</a></li>
655 <li>
656 <a href="https://revealjs.com/backgrounds/#parallax-background"
657 >Parallax backgrounds</a
658 >
659 </li>
660 <li><a href="https://revealjs.com/keyboard/">Custom keyboard bindings</a></li>
661 </ul>
662 </section>
663
664 <section style="text-align: left">
665 <h1>THE END</h1>
666 <p>
667 - <a href="https://slides.com">Try the online editor</a> <br />
668 - <a href="https://github.com/hakimel/reveal.js">Source code &amp; documentation</a>
669 </p>
670 </section>
671 </div>
672 </div>
673
674 <script src="dist/reveal.js"></script>
675 <script src="dist/plugin/zoom.js"></script>
676 <script src="dist/plugin/notes.js"></script>
677 <script src="dist/plugin/search.js"></script>
678 <script src="dist/plugin/markdown.js"></script>
679 <script src="dist/plugin/highlight.js"></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';
688
689 Reveal.initialize({
690 controls: true,
691 progress: true,
692 center: true,
693 hash: true,
694
695 // Learn about plugins: https://revealjs.com/plugins/
696 plugins: [RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight],
697 });
698 </script>
699 </body>
700 </html>
701
701 lines HTML