Your SlideShare is downloading. ×
Reveal.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Reveal.js

7,439,524
views

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

Published in: Technology

7 Comments
27 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,439,524
On Slideshare
0
From Embeds
0
Number of Embeds
11,784
Actions
Shares
0
Downloads
159
Comments
7
Likes
27
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