Reveal.js
+The HTML Presentation Framework
++ Created by Hakim El Hattab and contributors +
+Hello There
++ reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. +
+Vertical Slides
+Slides can be nested inside of each other.
+Use the Space key to navigate through all slides.
++ +
+
+ Basement Level 1
+Nested slides are useful for adding additional detail underneath a high level horizontal slide.
+Basement Level 2
+That's it, time to go back up.
++ +
+
+ Slides
++ Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com. +
+Point of View
++ Press ESC to enter the slide overview. +
++ Hold down the alt key (ctrl in Linux) and click on any element to zoom towards it using zoom.js. Click again to zoom back out. +
++ (NOTE: Use ctrl + click in Linux.) +
+Touch Optimized
++ Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides. +
+Fragments
+Hit the next arrow...
+... to step through ...
+... a fragmented slide.
+ + +Fragment Styles
+There's different types of fragments, like:
+grow
+shrink
+fade-out
++ fade-right, + up, + down, + left +
+fade-in-then-out
+fade-in-then-semi-out
+Highlight red blue green
+Transition Styles
+
+ You can select from different transitions, like:
+ None -
+ Fade -
+ Slide -
+ Convex -
+ Concave -
+ Zoom
+
Themes
+
+ reveal.js comes with a few themes built in:
+
+ Black (default) -
+ White -
+ League -
+ Sky -
+ Beige -
+ Simple
+ Serif -
+ Blood -
+ Night -
+ Moon -
+ Solarized
+
Slide Backgrounds
+
+ Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.
+
+
+ Image Backgrounds
+<section data-background="image.png">Tiled Backgrounds
+<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">Video Backgrounds
+<section data-background-video="video.mp4,video.webm">... and GIFs!
+Background Transitions
++ Different background transitions are available via the backgroundTransition option. This one's called "zoom". +
+Reveal.configure({ backgroundTransition: 'zoom' })Background Transitions
++ You can override background transitions per-slide. +
+<section data-background-transition="zoom">Iframe Backgrounds
+Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.
+Pretty Code
+
+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>
+ );
+}
+ Code syntax highlighting courtesy of highlight.js.
+Marvelous List
+-
+
- No order here +
- Or here +
- Or here +
- Or here +
Fantastic Ordered List
+-
+
- One is smaller than... +
- Two is smaller than... +
- Three! +
Tabular Tables
+| Item | +Value | +Quantity | +
|---|---|---|
| Apples | +$1 | +7 | +
| Lemonade | +$2 | +18 | +
| Bread | +$3 | +2 | +
Clever Quotes
+
+ These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from
and block:
+
+ “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.” ++
Intergalactic Interconnections
++ You can link between slides internally, + like this. +
+Speaker View
+There's a speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes.
+Press the S key to try it out.
+ + +Export to PDF
+Presentations can be exported to PDF, here's an example:
+ +Global State
+
+ Set data-state="something" on a slide and "something"
+ 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.
+
State Events
+
+ Additionally custom events can be triggered on a per slide basis by binding to the data-state name.
+
+Reveal.addEventListener( 'customevent', function() {
+ console.log( '"customevent" has fired' );
+} );
+ Take a Moment
++ 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. +
+Much more
+-
+
- Right-to-left support +
- Extensive JavaScript API +
- Auto-progression +
- Parallax backgrounds +
- Custom keyboard bindings +
+ 