Click here to load reader

Post on 12-Jul-2015




7 download

Embed Size (px)



    Created by / Hakim El Hattab @hakimel

  • HELLOTHEREreveal.js is a framework that enables you to create beautifulpresentations using HTML. This demo presentation will tell

    you more about what you can do with it.

  • VERTICALSLIDESSlides can be nested inside of each other.

    Use the Space key to navigate through all slides.

  • BASEMENTLEVEL1Nested slides are useful for adding additional detail

    underneath a high level horizontal slide.

  • BASEMENTLEVEL2That's it, time to go back up.

  • SLIDESNot a coder? No problem. There's a fully-featured visualeditor for authoring these, try it out at .http://slides.com

  • POINTOFVIEWPress ESC to enter the slide overview.

    Hold down alt and click on any element to zoom in on itusing . Alt + click anywhere to zoom back out.zoom.js

  • TOUCHOPTIMIZEDPresentations look great on touch devices, like mobilephones and tablets. Simply swipe through your slides.

  • MARKDOWNSUPPORTWrite content using inline or external Markdown.

    Instructions and more info available in the .readme

    ## Markdown support

    Write content using inline or external Markdown. Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown

  • FRAGMENTSHit the next arrow...

    ... to step through ...

    ... a fragmented slide.

  • FRAGMENTSTYLESThere's different types of fragments, like:





  • TRANSITIONSTYLESYou can select from different transitions, like:

    - - - - - None Fade Slide Convex Concave Zoom

  • THEMESreveal.js comes with a few themes built in:

    - - - - - - - -

    Black (default) White League Sky Beige SimpleSerif Night Moon Solarized

    * Theme demos are loaded after the presentation which leads to flicker. In production you shouldload your theme in the using a .

  • SLIDEBACKGROUNDSSet data-background="#dddddd" on a slide to change the

    background color. All CSS color formats are supported.




  • BACKGROUNDTRANSITIONSDifferent background transitions are available via the

    backgroundTransition option. This one's called "zoom".Reveal.configure({ backgroundTransition: 'zoom' })

  • BACKGROUNDTRANSITIONSYou can override background transitions per-slide.

  • PRETTYCODEfunction 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

  • MARVELOUSLISTNo order hereOr hereOr hereOr here

  • FANTASTICORDEREDLIST1. One is smaller than...2. Two is smaller than...3. Three!

  • TABULARTABLESItem Value QuantityApples $1 7Lemonade $2 18Bread $3 2

  • CLEVERQUOTESThese 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 thatmillions of monkeys typing at random on

    millions of typewriters would reproduce theentire works of Shakespeare. The Internet

    has proven this theory to be untrue.


    You can link between slides internally, .like this

  • SPEAKERVIEWThere's a . It includes a timer, preview of the

    upcoming slide as well as your speaker notes.speaker view

    Press the S key to try it out.

  • EXPORTTOPDFPresentations can be , below is an example

    that's been uploaded to SlideShare.exported to PDF

  • GLOBALSTATESet data-state="something" on a slide and

    "something" will be added as a class to the documentelement when the slide is open. This lets you apply broader

    style changes, like switching the page background.

  • STATEEVENTSAdditionally 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' );} );

  • TAKEAMOMENTPress B or . on your keyboard to pause the presentation.

    This is helpful when you're on stage and want to takedistracting slides off the screen.

  • MUCHMORERight-to-left supportAuto-progressionParallax backgrounds

  • STELLARLINKSTry the online editorSource code on GitHubFollow me on Twitter