REVEAL.JSHTML PRESENTATIONS MADE EASYCreated by /Hakim El Hattab @hakimel
HEADS UPreveal.js is a framework for easily creating beautiful presentationsusing HTML. Youll need a browser with support ...
VERTICAL SLIDESSlides can be nested inside of other slides, try pressing .down
BASEMENT LEVEL 1Press down or up to navigate.
BASEMENT LEVEL 2Cornify
BASEMENT LEVEL 3Thats it, time to go back up.
SLIDESNot a coder? No problem. Theres a fully-featured visual editor forauthoring these, try it out at .http://slid.es
POINT OF VIEWPress ESC to enter the slide overview.Hold down alt and click on any element to zoom in on it using. Alt + cl...
WORKS IN MOBILE SAFARITry it out! You can swipe through the slides and pinch your way tothe overview.
MARVELOUS UNORDERED LISTNo order hereOr hereOr hereOr here
FANTASTIC ORDERED LIST1. 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 bitmore info available .here<section data...
TRANSITION STYLESYou can select from different transitions, like:- - - - - - -Cube Page Concave Zoom Linear Fade None Defa...
THEMESReveal.js comes with a few themes built in:- - - - -Sky Beige Simple Serif Night Default* Theme demos are loaded aft...
GLOBAL STATESet data-state="something"on a slide and "something"will be added as a class to the document element when the ...
CUSTOM EVENTSAdditionally custom events can be triggered on a per slide basis bybinding to the data-statename.Reveal.addEv...
SLIDE BACKGROUNDSSet data-background="#007777"on a slide to change the fullpage background to the given color. All CSS col...
IMAGE BACKGROUNDS<section data-background="image.png">
REPEATED IMAGE BACKGROUNDS<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
BACKGROUND TRANSITIONSPass reveal.js the backgroundTransition: slideconfigargument to make backgrounds slide rather than f...
BACKGROUND TRANSITION OVERRIDEYou can override background transitions per slide by using data-background-transition="slide".
CLEVER QUOTESThese guys come in two forms, inline: “The nice thing aboutstandards is that there are so many to choose from...
PRETTY CODEfunction linkify( selector ) {if( supports3DTransforms ) {var nodes = document.querySelectorAll( selector );for...
INTERGALACTIC INTERCONNECTIONSYou can link between slides internally, .like this
FRAGMENTED VIEWSHit the next arrow...... to step through ...1. any type2. of view3. fragments
FRAGMENT STYLESTheres a few styles of fragments, like:growshrinkroll-infade-outhighlight-redhighlight-greenhighlight-blue
SPECTACULAR IMAGE!
EXPORT TO PDFPresentations can be , below is an example thatsbeen uploaded to SlideShare.exported to PDF« ‹ › »
TAKE A MOMENTPress b or period on your keyboard to enter the paused mode.This mode is helpful when you want to take distra...
STELLAR LINKSTry the online editorSource code on GitHubFollow me on Twitter
THE ENDBY HAKIM EL HATTAB / HAKIM.SE
Reveal
Upcoming SlideShare
Loading in …5
×

Reveal

1,704 views
1,501 views

Published on

Published in: Technology, Art & Photos
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,704
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
6
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Reveal

  1. 1. REVEAL.JSHTML PRESENTATIONS MADE EASYCreated by /Hakim El Hattab @hakimel
  2. 2. HEADS UPreveal.js is a framework for easily creating beautiful presentationsusing HTML. Youll need a browser with support for CSS 3Dtransforms to see it in its full glory.
  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 2Cornify
  6. 6. BASEMENT LEVEL 3Thats it, time to go back up.
  7. 7. SLIDESNot a coder? No problem. Theres a fully-featured visual editor forauthoring these, try it out at .http://slid.es
  8. 8. POINT OF VIEWPress ESC to enter the slide overview.Hold down alt and click on any element to zoom in on it using. Alt + click anywhere to zoom back out.zoom.js
  9. 9. WORKS IN MOBILE SAFARITry it out! You can swipe through the slides and pinch your way tothe overview.
  10. 10. MARVELOUS UNORDERED LISTNo order hereOr hereOr hereOr here
  11. 11. FANTASTIC ORDERED LIST1. One is smaller than...2. Two is smaller than...3. Three!
  12. 12. MARKDOWN SUPPORTFor those of you who like that sort of thing. Instructions and a bitmore info available .here<section data-markdown>## Markdown supportFor those of you who like that sort of thing.Instructions and a bit more info available [here](https://github.com/hakimel/</section>
  13. 13. TRANSITION STYLESYou can select from different transitions, like:- - - - - - -Cube Page Concave Zoom Linear Fade None Default
  14. 14. THEMESReveal.js comes with a few themes built in:- - - - -Sky Beige Simple Serif Night Default* Theme demos are loaded after the presentation which leads to flicker. In production you should load yourtheme in the <head>using a <link>.
  15. 15. GLOBAL STATESet data-state="something"on a slide and "something"will be added as a class to the document element when the slide isopen. This lets you apply broader style changes, like switching thebackground.
  16. 16. CUSTOM EVENTSAdditionally custom events can be triggered on a per slide basis bybinding to the data-statename.Reveal.addEventListener( customevent, function() {console.log( "customevent" has fired );} );
  17. 17. SLIDE BACKGROUNDSSet data-background="#007777"on a slide to change the fullpage background to the given color. All CSS color formats aresupported.
  18. 18. IMAGE BACKGROUNDS<section data-background="image.png">
  19. 19. REPEATED IMAGE BACKGROUNDS<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
  20. 20. BACKGROUND TRANSITIONSPass reveal.js the backgroundTransition: slideconfigargument to make backgrounds slide rather than fade.
  21. 21. BACKGROUND TRANSITION OVERRIDEYou can override background transitions per slide by using data-background-transition="slide".
  22. 22. CLEVER QUOTESThese guys come in two forms, inline: “The nice thing aboutstandards is that there are so many to choose from” and block:“For years there has been a theory that millions ofmonkeys typing at random on millions oftypewriters would reproduce the entire works ofShakespeare. The Internet has proven this theoryto be untrue.”
  23. 23. PRETTY CODEfunction linkify( selector ) {if( supports3DTransforms ) {var nodes = document.querySelectorAll( selector );for( var i = 0, len = nodes.length; i < len; i++ ) {var node = nodes[i];if( !node.className ) ) {node.className += roll;}};}}Courtesy of .highlight.js
  24. 24. INTERGALACTIC INTERCONNECTIONSYou can link between slides internally, .like this
  25. 25. FRAGMENTED VIEWSHit the next arrow...... to step through ...1. any type2. of view3. fragments
  26. 26. FRAGMENT STYLESTheres a few styles of fragments, like:growshrinkroll-infade-outhighlight-redhighlight-greenhighlight-blue
  27. 27. SPECTACULAR IMAGE!
  28. 28. EXPORT TO PDFPresentations can be , below is an example thatsbeen uploaded to SlideShare.exported to PDF« ‹ › »
  29. 29. TAKE A MOMENTPress b or period on your keyboard to enter the paused mode.This mode is helpful when you want to take distracting slides offthe screen during a presentation.
  30. 30. STELLAR LINKSTry the online editorSource code on GitHubFollow me on Twitter
  31. 31. THE ENDBY HAKIM EL HATTAB / HAKIM.SE

×