3.0.0

Click here to load reader

Post on 12-Jul-2015

1.100.086 views

Category:

Software

7 download

Embed Size (px)

TRANSCRIPT

  • REVEAL.JSTHEHTMLPRESENTATIONFRAMEWORK

    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:

    growshrink

    roll-in

    highlight-red

    highlight-blue

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

  • IMAGEBACKGROUNDS

  • TILEDBACKGROUNDS

  • VIDEOBACKGROUNDS

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

  • INTERGALACTICINTERCONNECTIONS

    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

  • THEENDBYHAKIMELHATTAB/HAKIM.SE