-
-
-
- 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 alt and click on any element to zoom in on it using zoom.js . Alt + click anywhere to zoom back out.
-
-
-
-
- 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.
-
-
- This slide has fragments which are also stepped through in the notes window.
-
-
-
- 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
-
-
-
-
-
-
-
-
-
- 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">
-
-
-
-
-
-
- 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">
-
-
-
- Pretty Code
-
-function linkify( selector ) {
- if( supports3DTransforms ) {
-
- var nodes = document.querySelectorAll( selector );
-
- for( var i = 0, len = nodes.length; i < len; i++ ) {
- var node = nodes[i];
-
- if( !node.className ) {
- node.className += ' roll';
- }
- }
- }
-}
-
- 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.
-
-
- 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).
-
-
-
-
- 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.
-
-
-
-
-
-
-
-