Revealjs sample
Upcoming SlideShare
Loading in...5

Like this? Share it with your network

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 3 3

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. REVEAL.JS HTML PRESENTATIONS MADE EASY Createdby /HakimElHattab @hakimel
  • 2. HEADS UP reveal.js is aframework for easilycreatingbeautiful presentations usingHTML. You'llneed abrowser with support for CSS 3D transforms to see itin its fullglory.
  • 3. VERTICAL SLIDES Slides can be nested inside of other slides, trypressing .down
  • 4. BASEMENT LEVEL 1 Press down or up to navigate.
  • 5. BASEMENT LEVEL 2 Cornify
  • 6. BASEMENT LEVEL 3 That's it, time to go back up.
  • 7. SLIDES Notacoder?No problem. There's afully-featured visualeditor for authoringthese, tryitoutat .
  • 8. POINT OF VIEW Press ESC to enter the slide overview. Hold down altand click on anyelementto zoom in on itusing . Alt+ click anywhere to zoom back out.zoom.js
  • 9. WORKS IN MOBILE SAFARI Tryitout!You can swipe through the slides and pinch your way to the overview.
  • 10. MARVELOUS UNORDERED LIST No order here Or here Or here Or here
  • 11. FANTASTIC ORDERED LIST 1. One is smaller than... 2. Two is smaller than... 3. Three!
  • 12. MARKDOWN SUPPORT For those of you who like thatsortof thing. Instructions and abit more info available .here <sectiondata-markdown> ##Markdownsupport Forthoseofyouwholikethatsortofthing. Instructionsandabitmoreinfoavailable[here]( </section>
  • 13. TRANSITION STYLES You can selectfrom differenttransitions, like: - - - - - - -Cube Page Concave Zoom Linear Fade None Default
  • 14. THEMES Reveal.js comes with afew themes builtin: - - - - - - Default Sky Beige Simple Serif Night Moon Solarized *Themedemosareloadedafterthepresentationwhichleadstoflicker.Inproductionyoushouldloadyour themeinthe<head>usinga<link>.
  • 15. GLOBAL STATE Setdata-state="something"on aslide and "something" willbe added as aclass to the documentelementwhen the slide is open. This lets you applybroader style changes, like switching the background.
  • 16. CUSTOM EVENTS Additionallycustom events can be triggered on aper slide basis bybindingto the data-statename. Reveal.addEventListener('customevent',function(){ console.log('"customevent"hasfired'); });
  • 17. SLIDE BACKGROUNDS Setdata-background="#007777"on aslide to change the fullpage background to the given color. AllCSS color formats are supported.
  • 18. IMAGE BACKGROUNDS <sectiondata-background="image.png">
  • 19. REPEATED IMAGE BACKGROUNDS <sectiondata-background="image.png"data-background-repeat="repeat"data-ba ckground-size="100px">
  • 20. BACKGROUND TRANSITIONS Pass reveal.js the backgroundTransition: 'slide' configargumentto make backgrounds slide rather than fade.
  • 21. BACKGROUND TRANSITION OVERRIDE You can override background transitions per slide byusing data-background-transition="slide".
  • 22. CLEVER QUOTES These guys come in two forms, inline: “The nice thing about standards is thatthere are so many to choose from”and block: “For years there has been atheory thatmillions of monkeys typing atrandomon millions of typewriters would reproduce the entire works of Shakespeare. The Internethas proven this theory to be untrue.”
  • 23. PRETTY CODE functionlinkify(selector){ if(supports3DTransforms){ varnodes=document.querySelectorAll(selector); for(vari=0,len=nodes.length;i<len;i++){ varnode=nodes[i]; if(!node.className){ node.className+='roll'; } } } } Courtesyof .highlight.js
  • 24. INTERGALACTIC INTERCONNECTIONS You can link between slides internally, .like this
  • 25. FRAGMENTED VIEWS Hitthe nextarrow... ... to step through ... 1. any type 2. of view 3. fragments
  • 26. FRAGMENT STYLES There's afew styles of fragments, like: grow shrink roll-in fade-out highlight-red highlight-green highlight-blue current-visible highlight-current-blue
  • 28. EXPORT TO PDF Presentations can be , below is an example that's been uploaded to SlideShare. exported to PDF
  • 29. TAKE A MOMENT Press b or period on your keyboard to enter the 'paused'mode. This mode is helpfulwhen you wantto take distractingslides off the screen duringapresentation.
  • 30. STELLAR LINKS Trythe online editor Source code on GitHub Follow me on Twitter