Presentations on the Open Web

Reveal.js is a framework
for easily crafting
beautiful presentations
in HTML

You'll need a browser with support for CSS 3D transforms to see it's full capabilities.

Tips on using Reveal.js

There is a lot of great information about using Reveal.js in the project's README page on GitHub.

Their original slide deck sample conent also contains a lot of great examples.

Try it out!

Create your own deck by forking a copy of this github gist:
https://gist.github.com/ryanj/af84d40e58c5c2a908dd

Or, by placing any valid Revealjs <section> tag content into a fresh gist.

When you're ready to view your slides, grab your github gist id and add it to the end of this url:

http://gist-reveal.it/YOUR_GIST_ID_HERE

Host your own themed slideshow index with Docker

Start up a local development server with:

docker run -d -p 80:8080 ryanj/gist-reveal.it

Built-in Analytics

Include your own GA-TRACKER key:

docker run -e "GA_TRACKER=GA-12345678" ryanj/gist-reveal.it

Broadcasting Your Slide Transitions

with Socket.IO

docker run -e "REVEAL_WEB_HOST=YOUR_HOSTNAME_HERE" -e "REVEAL_SOCKET_SECRET=0P3N-S0URC3" ryanj/gist-reveal.it

Configure your browser as a presentation device by setting the same key in your browser's localStorage

localStorage.secret="YOUR_SECRET_KEY"

Be sure to use two different devices or brower types when testing your broadcasting relay
(FireFox vs. Chrome, desktop vs. mobile, etc.)

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.


Reveal.addEventListener( 'customevent', function() {
	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


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

Courtesy of highlight.js.

Fragmented Views

Hit the next arrow...

... to step through ...

any type
of view
fragments

Fragment Styles

There's a few styles of fragments, like:

grow

shrink

roll-in

fade-out

highlight-red

highlight-green

highlight-blue

current-visible

highlight-current-blue

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.

Broadcasting Your

Reveal.js

Slideshow Presentations