Uploaded on

Sample presentation exported from reveal.js, the open source HTML presentation framework: http://lab.hakim.se/reveal-js.

Sample presentation exported from reveal.js, the open source HTML presentation framework: http://lab.hakim.se/reveal-js.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
7,327,328
On Slideshare
0
From Embeds
0
Number of Embeds
11,435

Actions

Shares
Downloads
157
Comments
7
Likes
25

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. REVEAL.JSHTML PRESENTATIONS MADE EASY
  • 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
  • 21. SPECTACULAR IMAGE!
  • 22. STELLAR LINKSSource code on githubRead more on my siteFollow me on Twitter
  • 23. THE ENDBY HAKIM EL HATTAB / HAKIM.SE