+
The HTML Presentation Framework
- Created by Hakim El Hattab and contributors + 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. + 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.
++ 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. + Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, + try it out at https://slides.com.
Hidden Slides
- 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`. + 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`.
Pretty Code
- import React, { useState } from 'react';
+ import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
- ...
+
+ ...
+
);
}
Code syntax highlighting courtesy of highlight.js.
++ Code syntax highlighting courtesy of + highlight.js. +
With animations
-
Lightbox
+ Turn any element into a lightbox using data‑preview‑image & data‑preview‑video. +
+ <img src="image.png" data-preview-image="image.png">
+ 
+
+ <img src="video.png" data-preview-video="video.mp4">
+ 
+ Add the r-fit-text class to auto-size text
FIT TEXT
@@ -207,7 +295,10 @@Fragments
Hit the next arrow...
... to step through ...
-... a fragmented slide.
++ ... a fragmented + slide. +
Transition Styles
- You can select from different transitions, like:
- reveal.js comes with a few themes built in:
- Set
- Different background transitions are available via the backgroundTransition option. This one's called "zoom".
+ Different background transitions are available via the backgroundTransition option. This
+ one's called "zoom".
- You can override background transitions per-slide.
- You can override background transitions per-slide. Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.
+ Since reveal.js runs on the web, you can easily embed other web content. Try
+ interacting with the page in the background.
+
- These guys come in two forms, inline: There's a speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes.
+ 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. Presentations can be exported to PDF, here's an example:
+ Presentations can be exported to PDF,
+ here's an example:
+
- Additionally custom events can be triggered on a per slide basis by binding to the
- 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.
+ 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.
- - Try the online editor
+ You can select from different transitions, like:
None -
Fade -
Slide -
@@ -247,19 +342,73 @@
Themes
+ reveal.js comes with a few themes built in:
- Black (default) -
- White -
- League -
- Sky -
- Beige -
- Simple
- Serif -
- Blood -
- Night -
- Moon -
- Solarized
+ Black (default)
+ -
+ White
+ -
+ League
+ -
+ Sky
+ -
+ Beige
+ -
+ Simple
+
+ Serif
+ -
+ Blood
+ -
+ Night
+ -
+ Moon
+ -
+ Solarized
Slide Backgrounds
data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.
+ 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">Background Transitions
Reveal.configure({ backgroundTransition: 'zoom' })Background Transitions
- <section data-background-transition="zoom">Iframe Backgrounds
- Clever Quotes
The nice thing about standards is that there are so many to choose from
and block:
+ 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.”
+
+ “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.”
Speaker View
- Export to PDF
- State Events
data-state name.
+ Additionally custom events can be triggered on a per slide basis by binding to the
+ data-state name.
Reveal.on( 'customevent', function() {
@@ -428,7 +641,8 @@ Reveal.on( 'customevent', function() {
Take a Moment
THE END
+ - Try the online editor
- Source code & documentation