RevealJS Core Features

A tour of what RevealJS can do

Prezi style zoom and pan

Exlcusive to Dinghy

title disappear in 2 seconds

Media

Full Page Video Next

count down sound playing

Fragments

  • Appears first
  • Fades up second
  • Highlights red third

Background

Set via data-background-color

Gradient Background

Set via data-background with a CSS gradient

Vertical Slides

Press ↓ to go deeper

Level 2 — Slide A

First child slide

Level 2 — Slide B

Second child slide

Level 2 — Slide C

Third child slide — press → to continue

Code Highlighting

let planets = [
  { name: 'mars', diameter: 6779 },
]

let planets = [
  { name: 'mars', diameter: 6779 },
  { name: 'earth', diameter: 12742 },
  { name: 'jupiter', diameter: 139820 }
]

let planets = [
  { name: 'mars', diameter: 6779 },
  { name: 'earth', diameter: 12742 },
  { name: 'jupiter', diameter: 139820 }
]
let circumferenceReducer = ( c, planet ) => {
  return c + planet.diameter * Math.PI;
}

let planets = [
  { name: 'mars', diameter: 6779 },
  { name: 'earth', diameter: 12742 },
  { name: 'jupiter', diameter: 139820 }
]

let c = planets.reduce( circumferenceReducer, 0 )

Transition

zoom

slide-in fade-out

fade-in slide-out

slide again

Auto-Animate

Auto-Animate

Auto-Animate

  • Mercury
  • Jupiter
  • Mars
  • Mercury
  • Earth
  • Jupiter
  • Saturn
  • Mars

Layout

r-stack

r-stack individually

r-fit-text

BIG

FIT TEXT

CAN BE USED FOR MULTIPLE HEADLINES

r-stretch

Image byline

r-frame

Speaker Notes

Open the speaker view with S to see notes.