:author: Charles Moulliard :backend: revealjs :blog: http://cmoulliard.github.io :browser_history: true :description: RevealJS Template to create a beautiful HTML Slideshow :idprefix: :linkattrs: // Themes : default, beige, moon, blood, night, serif, simple, sky, solarized :revealjs_theme: default :revealjs_display_slide_number: false :revealjs_slide_vertical_alignment: false :revealjs_history: true :twitter: cmoulliard = Getting Started with Reveal.js == Reveal.js HTML Presentations Made Easy ++++++ Created by {blog}[{author}] / http://twitter.com/{twitter}[@{twitter}]# ++++++ == 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 DOES NOT WORK AS IT IMPLIED TO HAVE A SECTION NESTED IN ANOTHER SECTION Slides can be nested inside of other slides, try pressing ++++++down++++++. +++

+++ == Basement Level 1 Press down or up to navigate. == Slides Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at http://slid.es[http://slid.es, window="_blank"]. == Point of View Press **ESC** to enter the slide overview. Hold down alt and click on any element to zoom in on it using http://lab.hakim.se/zoom-js[zoom.js]. Alt + click anywhere to zoom back out. == Marvelous Unordered List - No order here - Or here - Or here - Or here == Fantastic Ordered List [numbered] . One is smaller than... . Two is smaller than... . Three! == Transition Styles You can select from different transitions, like: link:?transition=cube#/transitions[Cube] - link:?transition=page#/transitions[Page] - link:?transition=concave#/transitions[Concave] - link:?transition=zoom#/transitions[Zoom] - link:?transition=linear#/transitions[Linear] - link:?transition=fade#/transitions[Fade] - link:?transition=none#/transitions[None] - link:?#/transitions[Default] == Themes Reveal.js comes with a few themes built in: link:?#/themes[Default] - link:?theme=sky#/themes[Sky] - link:?theme=beige#/themes[Beige] - link:?theme=simple#/themes[Simple] - link:?theme=serif#/themes[Serif] - link:?theme=night#/themes[Night] +++
+++ link:?theme=moon#/themes[Moon] - link:?theme=solarized#/themes[Solarized] ++++++ * Theme demos are loaded after the presentation which leads to flicker. + In production you should load your theme in the using a . ++++++ == 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. [source, java] Reveal.addEventListener( 'customevent', function() { console.log( '"customevent" has fired' ); } ); [data-background=#007777] == 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. Put macro block with data-background attribute just before the title of the slide which corresponds to the section tag used by Reveal ``` [data-background=#007777] == Slide Backgrounds ``` [data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png"] == Image Backgrounds ``` [data-background=image.png] == Image Backgrounds ``` [data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png", data-background-repeat="repeat", data-background-size="100px"] == REPEATED IMAGE BACKGROUNDS ``` [data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png", data-background-repeat="repeat", data-background-size="100px"] == REPEATED IMAGE BACKGROUNDS ``` [data-transition="linear", data-background="#4d7e65", data-background-transition="slide"] == Background Transitions Pass reveal.js the +++backgroundTransition: 'slide'+++ config argument to make backgrounds slide rather than fade. [data-transition="linear", data-background="#8c4738", data-background-transition="slide"] == 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 [source, javascript, source-highlighter=highlightjs] ---- 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 http://softwaremaniacs.org/soft/highlight/en/description/[highlight.js]. == Intergalactic Interconnections You can link between slides internally, link:#/2/3[like this]. == fragments == Fragmented Views Hit the next arrow... == To step Through ---

... 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 +++ == Export to PDF Presentations can be link:https://github.com/hakimel/reveal.js#pdf-export[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. == Stellar Links .Asciidoctor - http://http://asciidoctor.org/[Asciidoctor] - https://github.com/asciidoctor[Asciidoctor Source code on GitHub] .Reveal.js - http://lab.hakim.se/reveal-js[Reveal.js demo] - https://github.com/hakimel/reveal.js[Reveal.js Source code on GitHub] == THE END BY http://hakim.se[Hakim El Hattab] & http://cmoulliard.github.io[Charles Moulliard]