# Reveal.js

## Date

Created by Hakim El Hattab / @hakimel

reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory.

## Vertical Slides

Slides can be nested inside of other slides, try pressing down.

## Basement Level 1

Press down or up to navigate.

Cornify

## Basement Level 3

That's it, time to go back up.

## Slides

Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at http://slid.es.

## 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.

## Works in Mobile Safari

Try it out! You can swipe through the slides and pinch your way to the overview.

## Marvelous Unordered List

• No order here
• Or here
• Or here
• Or here

## Fantastic Ordered List

1. One is smaller than...
2. Two is smaller than...
3. Three!

## Transition Styles

You can select from different transitions, like:
Cube - Page - Concave - Zoom - Linear - Fade - None - Default

## Themes

Reveal.js comes with a few themes built in:
Default - Sky - Beige - Simple - Serif - Night
Moon - Solarized

* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link>.

## 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 background.

## Custom Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.


console.log( '"customevent" has fired' );
} );


## Slide Backgrounds

Set data-background="#007777" on a slide to change the full page background to the given color. All CSS color formats are supported.

## Image Backgrounds

<section data-background="image.png">

## Repeated Image Backgrounds

<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">

## Background Transitions

Pass reveal.js the backgroundTransition: 'slide' config argument to make backgrounds slide rather than fade.

## Background Transition Override

You can override background transitions per slide by using data-background-transition="slide".

## 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.”

## Pretty Code


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';
}
}
}
}


Courtesy of highlight.js.

## Intergalactic Interconnections

You can link between slides internally, like this.

## Fragmented Views

Hit the next arrow...

... to step through ...

1. any type
2. of view
3. fragments

## Fragment Styles

There's a few styles of fragments, like:

grow

shrink

roll-in

highlight-red

highlight-green

highlight-blue

current-visible

highlight-current-blue

## Export to PDF

Presentations can be exported to PDF, below is an example that's been uploaded to SlideShare.

## Take a Moment

Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen during a presentation.

# Mathjax

Just put some LaTeX in the slides :

\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned}

# Code



Mathjax