Slides can be nested inside of each other.
-Use the Space key to navigate through all slides.
-Nested slides are useful for adding additional detail underneath a high level horizontal slide.
-That's it, time to go back up.
-- Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com. -
-- 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`. -
-
- import React, { useState } from 'react';
-
- function Example() {
- const [count, setCount] = useState(0);
-
- return (
- ...
- );
- }
-
- Code syntax highlighting courtesy of highlight.js.
-
- - 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.) -
-Automatically animate matching elements across slides with Auto-Animate. -
-- Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your - slides. -
-Add the r-fit-text
class to auto-size text
Hit the next arrow...
-... to step through ...
-... a fragmented slide. -
- - -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 -
-
- You can select from different transitions, like:
- None -
- Fade -
- Slide -
- Convex -
- Concave -
- Zoom
-
- reveal.js comes with a few themes built in:
-
- Set data-background="#dddddd"
on a slide to change the background color. All CSS color
- formats are supported.
-
<section data-background-gradient=
- "linear-gradient(to bottom, #ddd, #191919)">
- <section data-background="image.png">
- <section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
- <section data-background-video="video.mp4,video.webm">
- - Different background transitions are available via the backgroundTransition option. This one's called - "zoom". -
-Reveal.configure({ backgroundTransition: 'zoom' })
- - You can override background transitions per-slide. -
-<section data-background-transition="zoom">
- Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the - page in the background.
-Item | -Value | -Quantity | -
---|---|---|
Apples | -$1 | -7 | -
Lemonade | -$2 | -18 | -
Bread | -$3 | -2 | -
- 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.” --
- You can link between slides internally, - like this. -
-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: -
- -
- 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.
-
- Additionally custom events can be triggered on a per slide basis by binding to the
- data-state
name.
-
-
- Reveal.on( 'customevent', function() {
- console.log( '"customevent" has fired' );
- } );
-
-
- - 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. -
-