REVEAL.JSHTML PRESENTATIONS MADE EASY
HEADS UPreveal.js is an easy to use, HTML based, presentation tool. Youll need amodern browser with support for CSS 3D tra...
VERTICAL SLIDESSlides can be nested inside of other slides, try pressing down .
BASEMENT LEVEL 1Press down or up to navigate.
BASEMENT LEVEL 2     Cornify
BASEMENT LEVEL 3Thats it, time to go back up.
HOLISTIC OVERVIEWPress ESC to enter the slide overview!
WORKS IN MOBILE SAFARITry it out! You can swipe through the slides pinch your way to the                            overvi...
MARVELOUS UNORDERED LIST       No order here       Or here       Or here       Or here
FANTASTIC ORDERED LIST  1. One is smaller than...  2. Two is smaller than...  3. Three!
MARKDOWN SUPPORTFor those of you who like that sort of thing. Instructions and a bit more                          info av...
TRANSITION STYLESYou can select from different transitions, like:                  Cube                  Page             ...
GLOBAL STATESet d t - t t = s m t i g on a slide and " o e h n " be       aasae"oehn"                                 s m ...
"BLACKOUT"
"SOOTHE"
CUSTOM EVENTSAdditionally custom events can be triggered on a per slide basis by                binding to the d t - t t n...
CLEVER QUOTESThese guys come in two forms, inline: “ The nice thing about standards is          that there are so many to ...
PRETTY CODEfnto lniy slco ){ ucin ikf( eetr  i(spot3Tasom ){   f uprsDrnfrs        vrnds=dcmn.urSlcoAl slco )         a oe...
INTERGALACTIC INTERCONNECTIONSYou can link between slides internally, like this .
FRAGMENTED VIEWS  Hit the next arrow...  ... to step through ...   1. a y t p        n ye   2. of view   3. fragments
SPECTACULAR IMAGE!
STELLAR LINKSSource code on githubRead more on my siteFollow me on Twitter
THE ENDBY HAKIM EL HATTAB / HAKIM.SE
Reveal.js
Upcoming SlideShare
Loading in...5
×

Reveal.js

7,535,196

Published on

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

Published in: Technology
7 Comments
27 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,535,196
On Slideshare
0
From Embeds
0
Number of Embeds
12,489
Actions
Shares
0
Downloads
164
Comments
7
Likes
27
Embeds 0
No embeds

No notes for slide

Reveal.js

  1. 1. REVEAL.JSHTML PRESENTATIONS MADE EASY
  2. 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. 3. VERTICAL SLIDESSlides can be nested inside of other slides, try pressing down .
  4. 4. BASEMENT LEVEL 1Press down or up to navigate.
  5. 5. BASEMENT LEVEL 2 Cornify
  6. 6. BASEMENT LEVEL 3Thats it, time to go back up.
  7. 7. HOLISTIC OVERVIEWPress ESC to enter the slide overview!
  8. 8. WORKS IN MOBILE SAFARITry it out! You can swipe through the slides pinch your way to the overview.
  9. 9. MARVELOUS UNORDERED LIST No order here Or here Or here Or here
  10. 10. FANTASTIC ORDERED LIST 1. One is smaller than... 2. Two is smaller than... 3. Three!
  11. 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. 12. TRANSITION STYLESYou can select from different transitions, like: Cube Page Concave Linear
  13. 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. 14. "BLACKOUT"
  15. 15. "SOOTHE"
  16. 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. 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. 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. 19. INTERGALACTIC INTERCONNECTIONSYou can link between slides internally, like this .
  20. 20. FRAGMENTED VIEWS Hit the next arrow... ... to step through ... 1. a y t p n ye 2. of view 3. fragments
  21. 21. SPECTACULAR IMAGE!
  22. 22. STELLAR LINKSSource code on githubRead more on my siteFollow me on Twitter
  23. 23. THE ENDBY HAKIM EL HATTAB / HAKIM.SE
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×