This example contains the bare minimum includes and markup required to run a reveal.js presentation.
+There's no theme included, so it will fall back on browser defaults.
++ 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. +
+ + ++ Slides can be nested inside of other slides, + try pressing down. +
+ +
+
+ Press down or up to navigate.
+Cornify
+ +
+
+ That's it, time to go back up.
+ +
+
+ + Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at http://slid.es. +
++ 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. +
++ Try it out! You can swipe through the slides and pinch your way to the overview. +
+
+ You can select from different transitions, like:
+ Cube -
+ Page -
+ Concave -
+ Zoom -
+ Linear -
+ Fade -
+ None -
+ Default
+
+ 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>.
+
+
+ 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.
+
+ 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' );
+} );
+
+ Set data-background="#007777" on a slide to change the full page background to the given color. All CSS color formats are supported.
+
+
+ <section data-background="image.png"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
+ Pass reveal.js the backgroundTransition: 'slide' config argument to make backgrounds slide rather than fade.
+
+ You can override background transitions per slide by using data-background-transition="slide".
+
+ 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.” ++
+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.
++ You can link between slides internally, + like this. +
+Hit the next arrow...
+... to step through ...
+any typeThere's a few styles of fragments, like:
+grow
+shrink
+roll-in
+fade-out
+highlight-red
+highlight-green
+highlight-blue
+current-visible
+highlight-current-blue
+
+
+ Presentations can be exported to PDF, below is an example that's been uploaded to SlideShare.
+ + ++ 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. +
+This example contains the bare minimum includes and markup required to run a reveal.js presentation.
-There's no theme included, so it will fall back on browser defaults.
-