2016-03-20 18:50:14 +01:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > reveal.js – < / title >
< meta name = "description" content = "A framework for easily creating beautiful presentations using HTML" >
< meta name = "author" content = "Hakim El Hattab" >
< meta name = "apple-mobile-web-app-capable" content = "yes" >
< meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" >
2019-01-30 16:31:31 +01:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2016-03-20 18:50:14 +01:00
2020-03-06 19:58:40 +01:00
< link rel = "stylesheet" href = "dist/reset.css" >
< link rel = "stylesheet" href = "dist/reveal.css" >
< link rel = "stylesheet" href = "dist/theme/black.css" id = "theme" >
2016-03-20 18:50:14 +01:00
2016-03-20 18:57:30 +01:00
<!-- Theme used for syntax highlighting of code -->
2020-05-08 21:04:19 +02:00
< link rel = "stylesheet" href = "lib/css/monokai.css" id = "highlight-theme" >
2016-03-20 18:50:14 +01:00
< / head >
< body >
< div class = "reveal" >
<!-- Any section element inside of this container is displayed as a slide -->
< div class = "slides" >
< section >
< h1 > Reveal.js< / h1 >
< h3 > The HTML Presentation Framework< / h3 >
< p >
2017-11-22 14:46:55 +01:00
< 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 >
2016-03-20 18:50:14 +01:00
< / p >
< / section >
2016-04-07 10:25:10 +02:00
< section >
2016-03-20 18:50:14 +01:00
< h2 > Hello There< / h2 >
< p >
reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
< / p >
< / section >
<!-- Example of nested vertical slides -->
< section >
< section >
< h2 > Vertical Slides< / h2 >
< p > Slides can be nested inside of each other.< / p >
< p > Use the < em > Space< / em > key to navigate through all slides.< / p >
< br >
< a href = "#" class = "navigate-down" >
2020-05-14 12:39:45 +02:00
< img class = "r-frame" style = "background: rgba(255,255,255,0.1);" width = "178" height = "238" data-src = "https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt = "Down arrow" >
2016-03-20 18:50:14 +01:00
< / a >
< / section >
< section >
< h2 > Basement Level 1< / h2 >
< p > Nested slides are useful for adding additional detail underneath a high level horizontal slide.< / p >
< / section >
< section >
< h2 > Basement Level 2< / h2 >
< p > That's it, time to go back up.< / p >
< br >
< a href = "#/2" >
2020-05-14 12:39:45 +02:00
< img class = "r-frame" style = "background: rgba(255,255,255,0.1); transform: rotate(180deg);" width = "178" height = "238" data-src = "https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt = "Up arrow" >
2016-03-20 18:50:14 +01:00
< / a >
< / section >
< / section >
< section >
< h2 > Slides< / h2 >
< p >
2017-11-22 14:46:55 +01:00
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 > .
2016-03-20 18:50:14 +01:00
< / p >
< / section >
2020-03-01 10:21:30 +01:00
< section data-auto-animate >
< h2 data-id = "code-title" > Pretty Code< / h2 >
< pre data-id = "code-animation" > < code class = "hljs" data-trim data-line-numbers >
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
...
);
}
< / code > < / pre >
< p > Code syntax highlighting courtesy of < a href = "https://highlightjs.org/usage/" > highlight.js< / a > .< / p >
< / section >
< section data-auto-animate >
< h2 data-id = "code-title" > With animations< / h2 >
2020-03-12 17:08:20 +01:00
< pre data-id = "code-animation" > < code class = "hljs" data-trim data-line-numbers = "|4,8-11|17|22-24" >
2020-03-01 10:21:30 +01:00
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
< div>
< p> You clicked {count} times< /p>
< button onClick={() => setCount(count + 1)}>
Click me
< /button>
< /div>
);
}
2020-03-12 17:08:20 +01:00
function SecondExample() {
const [count, setCount] = useState(0);
return (
< div>
< p> You clicked {count} times< /p>
< button onClick={() => setCount(count + 1)}>
Click me
< /button>
< /div>
);
}
2020-03-01 10:21:30 +01:00
< / code > < / pre >
< / section >
2016-03-20 18:50:14 +01:00
< section >
< h2 > Point of View< / h2 >
< p >
Press < strong > ESC< / strong > to enter the slide overview.
< / p >
< p >
2018-11-21 08:29:17 +01:00
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.
2016-03-20 18:50:14 +01:00
< / p >
2019-03-06 23:05:45 +01:00
< p >
(NOTE: Use ctrl + click in Linux.)
< / p >
2016-03-20 18:50:14 +01:00
< / section >
2020-05-19 10:22:19 +02:00
< section data-auto-animate data-auto-animate-easing = "cubic-bezier(0.770, 0.000, 0.175, 1.000)" >
< h2 > Auto-Animate< / h2 >
< p > Automatically animate matching elements across slides with < a href = "https://revealjs.netlify.app/auto-animate/" > Auto-Animate< / a > .< / p >
< div class = "r-hstack justify-center" >
< div data-id = "box1" style = "background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;" > < / div >
< div data-id = "box2" style = "background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;" > < / div >
< div data-id = "box3" style = "background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;" > < / div >
< / div >
< / section >
< section data-auto-animate data-auto-animate-easing = "cubic-bezier(0.770, 0.000, 0.175, 1.000)" >
< div class = "r-hstack justify-center" >
< div data-id = "box1" data-auto-animate-delay = "0" style = "background: cyan; width: 150px; height: 100px; margin: 10px;" > < / div >
< div data-id = "box2" data-auto-animate-delay = "0.1" style = "background: magenta; width: 150px; height: 100px; margin: 10px;" > < / div >
< div data-id = "box3" data-auto-animate-delay = "0.2" style = "background: yellow; width: 150px; height: 100px; margin: 10px;" > < / div >
< / div >
< h2 style = "margin-top: 20px;" > Auto-Animate< / h2 >
< / section >
< section data-auto-animate data-auto-animate-easing = "cubic-bezier(0.770, 0.000, 0.175, 1.000)" >
< div class = "r-stack" >
< div data-id = "box1" style = "background: cyan; width: 300px; height: 300px; border-radius: 200px;" > < / div >
< div data-id = "box2" style = "background: magenta; width: 200px; height: 200px; border-radius: 200px;" > < / div >
< div data-id = "box3" style = "background: yellow; width: 100px; height: 100px; border-radius: 200px;" > < / div >
< / div >
< h2 style = "margin-top: 20px;" > Auto-Animate< / h2 >
< / section >
2016-03-20 18:50:14 +01:00
< section >
< h2 > Touch Optimized< / h2 >
< p >
Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
< / p >
< / section >
< section data-markdown >
< script type = "text/template" >
## Markdown support
Write content using inline or external Markdown.
2020-05-18 20:52:51 +02:00
Instructions and more info available in the [readme](https://revealjs.netlify.app/markdown/).
2016-03-20 18:50:14 +01:00
2020-04-27 10:43:56 +02:00
```[]
2016-03-20 18:50:14 +01:00
< section data-markdown >
## Markdown support
Write content using inline or external Markdown.
2020-05-18 20:52:51 +02:00
Instructions and more info available in the [readme](https://revealjs.netlify.app/markdown/).
2016-03-20 18:50:14 +01:00
< / section >
```
< / script >
< / section >
< section >
< section id = "fragments" >
< h2 > Fragments< / h2 >
< p > Hit the next arrow...< / p >
< p class = "fragment" > ... to step through ...< / p >
< p > < span class = "fragment" > ... a< / span > < span class = "fragment" > fragmented< / span > < span class = "fragment" > slide.< / span > < / p >
< aside class = "notes" >
This slide has fragments which are also stepped through in the notes window.
< / aside >
< / section >
< section >
< h2 > Fragment Styles< / h2 >
< p > There's different types of fragments, like:< / p >
< p class = "fragment grow" > grow< / p >
< p class = "fragment shrink" > shrink< / p >
< p class = "fragment fade-out" > fade-out< / p >
2018-06-11 10:59:31 +02:00
< p >
< span style = "display: inline-block;" class = "fragment fade-right" > fade-right, < / span >
< span style = "display: inline-block;" class = "fragment fade-up" > up, < / span >
< span style = "display: inline-block;" class = "fragment fade-down" > down, < / span >
< span style = "display: inline-block;" class = "fragment fade-left" > left< / span >
< / p >
< p class = "fragment fade-in-then-out" > fade-in-then-out< / p >
2018-06-13 14:12:25 +02:00
< p class = "fragment fade-in-then-semi-out" > fade-in-then-semi-out< / p >
2016-03-20 18:50:14 +01:00
< p > Highlight < span class = "fragment highlight-red" > red< / span > < span class = "fragment highlight-blue" > blue< / span > < span class = "fragment highlight-green" > green< / span > < / p >
< / section >
< / section >
< section id = "transitions" >
< h2 > Transition Styles< / h2 >
< p >
You can select from different transitions, like: < br >
< a href = "?transition=none#/transitions" > None< / a > -
< a href = "?transition=fade#/transitions" > Fade< / a > -
< a href = "?transition=slide#/transitions" > Slide< / a > -
< a href = "?transition=convex#/transitions" > Convex< / a > -
< a href = "?transition=concave#/transitions" > Concave< / a > -
< a href = "?transition=zoom#/transitions" > Zoom< / a >
< / p >
< / section >
< section id = "themes" >
< h2 > Themes< / h2 >
< p >
reveal.js comes with a few themes built in: < br >
<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;" > Black (default)< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/white.css'); return false;" > White< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/league.css'); return false;" > League< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/sky.css'); return false;" > Sky< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;" > Beige< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;" > Simple< / a > < br >
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;" > Serif< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/blood.css'); return false;" > Blood< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;" > Night< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;" > Moon< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;" > Solarized< / a >
< / p >
< / section >
< section >
< section data-background = "#dddddd" >
< h2 > Slide Backgrounds< / h2 >
< p >
Set < code > data-background="#dddddd"< / code > on a slide to change the background color. All CSS color formats are supported.
< / p >
< a href = "#" class = "navigate-down" >
2020-05-14 12:39:45 +02:00
< img class = "r-frame" style = "background: rgba(255,255,255,0.1);" width = "178" height = "238" data-src = "https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt = "Down arrow" >
2016-03-20 18:50:14 +01:00
< / a >
< / section >
< section data-background = "https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" >
< h2 > Image Backgrounds< / h2 >
2019-03-08 15:07:59 +01:00
< pre > < code class = "hljs html" > < section data-background="image.png"> < / code > < / pre >
2016-03-20 18:50:14 +01:00
< / section >
< section data-background = "https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat = "repeat" data-background-size = "100px" >
< h2 > Tiled Backgrounds< / h2 >
2019-03-08 15:07:59 +01:00
< pre > < code class = "hljs html" style = "word-wrap: break-word;" > < section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"> < / code > < / pre >
2016-03-20 18:50:14 +01:00
< / section >
< section data-background-video = "https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color = "#000000" >
< div style = "background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;" >
< h2 > Video Backgrounds< / h2 >
2019-03-08 15:07:59 +01:00
< pre > < code class = "hljs html" style = "word-wrap: break-word;" > < section data-background-video="video.mp4,video.webm"> < / code > < / pre >
2016-03-20 18:50:14 +01:00
< / div >
< / section >
< section data-background = "http://i.giphy.com/90F8aUepslB84.gif" >
< h2 > ... and GIFs!< / h2 >
< / section >
< / section >
< section data-transition = "slide" data-background = "#4d7e65" data-background-transition = "zoom" >
< h2 > Background Transitions< / h2 >
< p >
Different background transitions are available via the backgroundTransition option. This one's called "zoom".
< / p >
2019-03-08 15:07:59 +01:00
< pre > < code class = "hljs javascript" > Reveal.configure({ backgroundTransition: 'zoom' })< / code > < / pre >
2016-03-20 18:50:14 +01:00
< / section >
< section data-transition = "slide" data-background = "#b5533c" data-background-transition = "zoom" >
< h2 > Background Transitions< / h2 >
< p >
You can override background transitions per-slide.
< / p >
2019-03-08 15:07:59 +01:00
< pre > < code class = "hljs html" style = "word-wrap: break-word;" > < section data-background-transition="zoom"> < / code > < / pre >
2016-03-20 18:50:14 +01:00
< / section >
2019-03-20 09:12:31 +01:00
< section data-background-iframe = "https://hakim.se" data-background-interactive >
< 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;" >
< h2 > Iframe Backgrounds< / h2 >
< p > Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.< / p >
< / div >
< / section >
2016-03-20 18:50:14 +01:00
< section >
< h2 > Marvelous List< / h2 >
< ul >
< li > No order here< / li >
< li > Or here< / li >
< li > Or here< / li >
< li > Or here< / li >
< / ul >
< / section >
< section >
< h2 > Fantastic Ordered List< / h2 >
< ol >
< li > One is smaller than...< / li >
< li > Two is smaller than...< / li >
< li > Three!< / li >
< / ol >
< / section >
< section >
< h2 > Tabular Tables< / h2 >
< table >
< thead >
< tr >
< th > Item< / th >
< th > Value< / th >
< th > Quantity< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > Apples< / td >
< td > $1< / td >
< td > 7< / td >
< / tr >
< tr >
< td > Lemonade< / td >
< td > $2< / td >
< td > 18< / td >
< / tr >
< tr >
< td > Bread< / td >
< td > $3< / td >
< td > 2< / td >
< / tr >
< / tbody >
< / table >
< / section >
< section >
< h2 > Clever Quotes< / h2 >
< p >
2017-06-14 10:42:41 +02:00
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:
2016-03-20 18:50:14 +01:00
< / p >
< blockquote cite = "http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations" >
“ For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”
< / blockquote >
< / section >
< section >
< h2 > Intergalactic Interconnections< / h2 >
< p >
You can link between slides internally,
< a href = "#/2/3" > like this< / a > .
< / p >
< / section >
< section >
< h2 > Speaker View< / h2 >
2020-05-18 20:52:51 +02:00
< p > There's a < a href = "https://revealjs.netlify.app/speaker-view/" > speaker view< / a > . It includes a timer, preview of the upcoming slide as well as your speaker notes.< / p >
2016-03-20 18:50:14 +01:00
< p > Press the < em > S< / em > key to try it out.< / p >
< aside class = "notes" >
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).
< / aside >
< / section >
< section >
< h2 > Export to PDF< / h2 >
2020-05-18 20:52:51 +02:00
< p > Presentations can be < a href = "https://revealjs.netlify.app/pdf-export/" > exported to PDF< / a > , here's an example:< / p >
2016-04-10 11:57:38 +02:00
< 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 >
2016-03-20 18:50:14 +01:00
< / section >
< section >
< h2 > Global State< / h2 >
< p >
Set < code > data-state="something"< / code > on a slide and < code > "something"< / code >
will be added as a class to the document element when the slide is open. This lets you
apply broader style changes, like switching the page background.
< / p >
< / section >
< section data-state = "customevent" >
< h2 > State Events< / h2 >
< p >
Additionally custom events can be triggered on a per slide basis by binding to the < code > data-state< / code > name.
< / p >
< pre > < code class = "javascript" data-trim contenteditable style = "font-size: 18px;" >
2020-04-07 09:05:56 +02:00
Reveal.on( 'customevent', function() {
2016-03-20 18:50:14 +01:00
console.log( '"customevent" has fired' );
} );
< / code > < / pre >
< / section >
< section >
< h2 > Take a Moment< / h2 >
< p >
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.
< / p >
< / section >
< section >
< h2 > Much more< / h2 >
< ul >
< li > Right-to-left support< / li >
2020-05-18 20:52:51 +02:00
< li > < a href = "https://revealjs.netlify.app/api/" > Extensive JavaScript API< / a > < / li >
< li > < a href = "https://revealjs.netlify.app/auto-slide/" > Auto-progression< / a > < / li >
< li > < a href = "https://revealjs.netlify.app/backgrounds/#parallax-background" > Parallax backgrounds< / a > < / li >
< li > < a href = "https://revealjs.netlify.app/keyboard/" > Custom keyboard bindings< / a > < / li >
2016-03-20 18:50:14 +01:00
< / ul >
< / section >
< section style = "text-align: left;" >
< h1 > THE END< / h1 >
< p >
2017-11-22 14:46:55 +01:00
- < a href = "https://slides.com" > Try the online editor< / a > < br >
2016-03-20 18:50:14 +01:00
- < a href = "https://github.com/hakimel/reveal.js" > Source code & documentation< / a >
< / p >
< / section >
< / div >
< / div >
2020-05-18 20:52:51 +02:00
< script src = "dist/reveal.js" > < / script >
< script src = "plugin/zoom/zoom.js" > < / script >
< script src = "plugin/notes/notes.js" > < / script >
< script src = "plugin/search/search.js" > < / script >
< script src = "plugin/markdown/markdown.js" > < / script >
< script src = "plugin/highlight/highlight.js" > < / script >
< script >
2020-03-07 11:50:58 +01:00
2020-05-18 20:52:51 +02:00
// Also available as an ES module, see:
// https://revealjs.netlify.app/initialization/
2020-04-17 10:59:55 +02:00
Reveal.initialize({
2016-03-20 18:50:14 +01:00
controls: true,
progress: true,
center: true,
2018-12-19 11:04:29 +01:00
hash: true,
2016-03-20 18:50:14 +01:00
2020-05-18 20:52:51 +02:00
// Learn about plugins: https://revealjs.netlify.app/plugins/
plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight ]
2016-03-20 18:50:14 +01:00
});
< / script >
< / body >
< / html >
