Remote Presentation Controller
+Remote Presentation Controller
 |
@@ -25,22 +26,50 @@
 |
||
 |
+ + |  |
+
| ←Prev | +Next→ | +
Heads Up
-- reveal.js is an easy to use, HTML based, presentation tool. You'll need a modern browser with - support for CSS 3D transforms to see it in its full glory. -
-- - Hakim El Hattab / @hakimel -
- - -Vertical Slides
-
- Slides can be nested inside of other slides,
- try pressing down.
-
-
- Basement Level 1
-Press down or up to navigate.
-Basement Level 2
-Cornify
- -
-
- Basement Level 3
-That's it, time to go back up.
- -
-
- Holistic Overview
-- Press ESC to enter the slide overview! -
-Works in Mobile Safari
-- Try it out! You can swipe through the slides pinch your way to the overview. -
-Transition Styles
-- You can select from different transitions, like: -
- -Marvelous Unordered List
--
-
- No order here -
- Or here -
- Or here -
- Or here -
Fantastic Ordered List
--
-
- One is smaller than... -
- Two is smaller than... -
- Three! -
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 let's you
- apply broader style changes, like switching the background.
-
-
- "blackout"
- -
-
- "soothe"
- -
-
- 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' );
+
+
+ Reveal.js
+ HTML Presentations Made Easy
+
+ Created by Hakim El Hattab / @hakimel
+
+
+
+
+ Heads Up
+
+ 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.
+
+
+ Basement Level 2
+ 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
+
+ - One is smaller than...
+ - Two is smaller than...
+ - 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.
+
+
+Reveal.addEventListener( 'customevent', function() {
+ console.log( '"customevent" has fired' );
} );
-
-
-
-
- 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
-
+
+
+
+
+
+ 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 ) {
+ if( supports3DTransforms ) {
-var nodes = document.querySelectorAll( selector );
+ var nodes = document.querySelectorAll( selector );
-for( var i = 0, len = nodes.length; i < len; i++ ) {
-var node = nodes[i];
+ for( var i = 0, len = nodes.length; i < len; i++ ) {
+ var node = nodes[i];
-if( !node.className ) ) {
-node.className += ' roll';
-}
-};
+ 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 ...
-
- any type- of view
- - fragments
-
-
-
-
- Spectacular image!
-
- 
-
-
-
-
- Stellar Links
-
-
-
-
- THE END
- BY Hakim El Hattab / hakim.se
-
-
-
-
-
-
-
-
-
+ Courtesy of highlight.js.
+Intergalactic Interconnections
++ You can link between slides internally, + like this. +
+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
+Spectacular image!
+ +
+
+ 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. +
+