of 24
Sample presentation exported from reveal.js, the open source HTML presentation framework:
  • 2. HEADS UPreveal.js is an easy to use, HTML based, presentation tool. Youll need amodern browser with support for CSS 3D transforms to see it in its full glory. - Hakim El Hattab / @hakimel
  • 3. VERTICAL SLIDESSlides can be nested inside of other slides, try pressing down .
  • 4. BASEMENT LEVEL 1Press down or up to navigate.
  • 5. BASEMENT LEVEL 2 Cornify
  • 6. BASEMENT LEVEL 3Thats it, time to go back up.
  • 7. HOLISTIC OVERVIEWPress ESC to enter the slide overview!
  • 8. WORKS IN MOBILE SAFARITry it out! You can swipe through the slides pinch your way to the overview.
  • 9. MARVELOUS UNORDERED LIST No order here Or here Or here Or here
  • 10. FANTASTIC ORDERED LIST 1. One is smaller than... 2. Two is smaller than... 3. Three!
  • 11. MARKDOWN SUPPORTFor those of you who like that sort of thing. Instructions and a bit more info available here . <eto dt-akon scin aamrdw> # Mrdw spot # akon upr Frtoeo yuwolk ta sr o tig o hs f o h ie ht ot f hn. Isrcin adabtmr if aalbe[ee(tp:/ihbcmhkml ntutos n i oe no vial hr]hts/gtu.o/aie/ rva.smrdw) eelj#akon. <scin /eto>
  • 12. TRANSITION STYLESYou can select from different transitions, like: Cube Page Concave Linear
  • 13. GLOBAL STATESet d t - t t = s m t i g on a slide and " o e h n " be aasae"oehn" s m t i g willadded as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the background.
  • 14. "BLACKOUT"
  • 15. "SOOTHE"
  • 16. CUSTOM EVENTSAdditionally custom events can be triggered on a per slide basis by binding to the d t - t t name. aasae Rva.dEetitnr utmvn fnto( { eeladvnLsee( csoeet, ucin) cnoelg csoeet hsfrd ) osl.o( "utmvn" a ie ; });
  • 17. CLEVER QUOTESThese 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. ”
  • 18. PRETTY CODEfnto lniy slco ){ ucin ikf( eetr i(spot3Tasom ){ f uprsDrnfrs vrnds=dcmn.urSlcoAl slco ) a oe ouetqeyeetrl( eetr ; fr vri=0 ln=ndslnt;i<ln i+){ o( a , e oe.egh e; + vrnd =ndsi; a oe oe[] i(!oecasae)){ f nd.lsNm nd.lsNm + rl oecasae = ol; } }; }} Courtesy of highlight.js .
  • 19. INTERGALACTIC INTERCONNECTIONSYou can link between slides internally, like this .
  • 20. FRAGMENTED VIEWS Hit the next arrow... ... to step through ... 1. a y t p n ye 2. of view 3. fragments
  • 22. STELLAR LINKSSource code on githubRead more on my siteFollow me on Twitter