REVEAL.JS
HTML PRESENTATIONS MADE EASY
Createdby /HakimElHattab @hakimel
HEADS UP
reveal.js is aframework for easilycreatingbeautiful
presentations usingHTML. You'llneed abrowser with support
for...
VERTICAL SLIDES
Slides can be nested inside of other slides, trypressing .down
BASEMENT LEVEL 1
Press down or up to navigate.
BASEMENT LEVEL 2
Cornify
BASEMENT LEVEL 3
That's it, time to go back up.
SLIDES
Notacoder?No problem. There's afully-featured visualeditor
for authoringthese, tryitoutat .http://slid.es
POINT OF VIEW
Press ESC to enter the slide overview.
Hold down altand click on anyelementto zoom in on itusing
. Alt+ clic...
WORKS IN MOBILE SAFARI
Tryitout!You can swipe through the slides and pinch your way
to the overview.
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 SUPPORT
For those of you who like thatsortof thing. Instructions and abit
more info available .here
<sectiondata-...
TRANSITION STYLES
You can selectfrom differenttransitions, like:
- - - - - - -Cube Page Concave Zoom Linear Fade None Defa...
THEMES
Reveal.js comes with afew themes builtin:
- - - - -
-
Default Sky Beige Simple Serif Night
Moon Solarized
*Themedem...
GLOBAL STATE
Setdata-state="something"on aslide and "something"
willbe added as aclass to the documentelementwhen the slid...
CUSTOM EVENTS
Additionallycustom events can be triggered on aper slide basis
bybindingto the data-statename.
Reveal.addEve...
SLIDE BACKGROUNDS
Setdata-background="#007777"on aslide to change the
fullpage background to the given color. AllCSS color...
IMAGE BACKGROUNDS
<sectiondata-background="image.png">
REPEATED IMAGE BACKGROUNDS
<sectiondata-background="image.png"data-background-repeat="repeat"data-ba
ckground-size="100px">
BACKGROUND TRANSITIONS
Pass reveal.js the backgroundTransition: 'slide'
configargumentto make backgrounds slide rather tha...
BACKGROUND TRANSITION OVERRIDE
You can override background transitions per slide byusing
data-background-transition="slide...
CLEVER QUOTES
These guys come in two forms, inline: “The nice thing about
standards is thatthere are so many to choose fro...
PRETTY CODE
functionlinkify(selector){
if(supports3DTransforms){
varnodes=document.querySelectorAll(selector);
for(vari=0,...
INTERGALACTIC INTERCONNECTIONS
You can link between slides internally, .like this
FRAGMENTED VIEWS
Hitthe nextarrow...
... to step through ...
1. any type
2. of view
3. fragments
FRAGMENT STYLES
There's afew styles of fragments, like:
grow
shrink
roll-in
fade-out
highlight-red
highlight-green
highlig...
SPECTACULAR IMAGE!
EXPORT TO PDF
Presentations can be , below is an example
that's been uploaded to SlideShare.
exported to PDF
TAKE A MOMENT
Press b or period on your keyboard to enter the 'paused'mode.
This mode is helpfulwhen you wantto take distr...
STELLAR LINKS
Trythe online editor
Source code on GitHub
Follow me on Twitter
THE END
BY HAKIM EL HATTAB / HAKIM.SE
Upcoming SlideShare
Loading in...5
×

Revealjs sample

794

Published on

Published in: Internet, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
794
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Revealjs sample

  1. 1. REVEAL.JS HTML PRESENTATIONS MADE EASY Createdby /HakimElHattab @hakimel
  2. 2. HEADS UP reveal.js is aframework for easilycreatingbeautiful presentations usingHTML. You'llneed abrowser with support for CSS 3D transforms to see itin its fullglory.
  3. 3. VERTICAL SLIDES Slides can be nested inside of other slides, trypressing .down
  4. 4. BASEMENT LEVEL 1 Press down or up to navigate.
  5. 5. BASEMENT LEVEL 2 Cornify
  6. 6. BASEMENT LEVEL 3 That's it, time to go back up.
  7. 7. SLIDES Notacoder?No problem. There's afully-featured visualeditor for authoringthese, tryitoutat .http://slid.es
  8. 8. POINT OF VIEW Press ESC to enter the slide overview. Hold down altand click on anyelementto zoom in on itusing . Alt+ click anywhere to zoom back out.zoom.js
  9. 9. WORKS IN MOBILE SAFARI Tryitout!You can swipe through the slides and pinch your way to the overview.
  10. 10. MARVELOUS UNORDERED LIST No order here Or here Or here Or here
  11. 11. FANTASTIC ORDERED LIST 1. One is smaller than... 2. Two is smaller than... 3. Three!
  12. 12. MARKDOWN SUPPORT For those of you who like thatsortof thing. Instructions and abit more info available .here <sectiondata-markdown> ##Markdownsupport Forthoseofyouwholikethatsortofthing. Instructionsandabitmoreinfoavailable[here](https://github.com/hakimel/reveal.js# </section>
  13. 13. TRANSITION STYLES You can selectfrom differenttransitions, like: - - - - - - -Cube Page Concave Zoom Linear Fade None Default
  14. 14. THEMES Reveal.js comes with afew themes builtin: - - - - - - Default Sky Beige Simple Serif Night Moon Solarized *Themedemosareloadedafterthepresentationwhichleadstoflicker.Inproductionyoushouldloadyour themeinthe<head>usinga<link>.
  15. 15. GLOBAL STATE Setdata-state="something"on aslide and "something" willbe added as aclass to the documentelementwhen the slide is open. This lets you applybroader style changes, like switching the background.
  16. 16. CUSTOM EVENTS Additionallycustom events can be triggered on aper slide basis bybindingto the data-statename. Reveal.addEventListener('customevent',function(){ console.log('"customevent"hasfired'); });
  17. 17. SLIDE BACKGROUNDS Setdata-background="#007777"on aslide to change the fullpage background to the given color. AllCSS color formats are supported.
  18. 18. IMAGE BACKGROUNDS <sectiondata-background="image.png">
  19. 19. REPEATED IMAGE BACKGROUNDS <sectiondata-background="image.png"data-background-repeat="repeat"data-ba ckground-size="100px">
  20. 20. BACKGROUND TRANSITIONS Pass reveal.js the backgroundTransition: 'slide' configargumentto make backgrounds slide rather than fade.
  21. 21. BACKGROUND TRANSITION OVERRIDE You can override background transitions per slide byusing data-background-transition="slide".
  22. 22. CLEVER QUOTES These guys come in two forms, inline: “The nice thing about standards is thatthere are so many to choose from”and block: “For years there has been atheory thatmillions of monkeys typing atrandomon millions of typewriters would reproduce the entire works of Shakespeare. The Internethas proven this theory to be untrue.”
  23. 23. PRETTY CODE functionlinkify(selector){ if(supports3DTransforms){ varnodes=document.querySelectorAll(selector); for(vari=0,len=nodes.length;i<len;i++){ varnode=nodes[i]; if(!node.className){ node.className+='roll'; } } } } Courtesyof .highlight.js
  24. 24. INTERGALACTIC INTERCONNECTIONS You can link between slides internally, .like this
  25. 25. FRAGMENTED VIEWS Hitthe nextarrow... ... to step through ... 1. any type 2. of view 3. fragments
  26. 26. FRAGMENT STYLES There's afew styles of fragments, like: grow shrink roll-in fade-out highlight-red highlight-green highlight-blue current-visible highlight-current-blue
  27. 27. SPECTACULAR IMAGE!
  28. 28. EXPORT TO PDF Presentations can be , below is an example that's been uploaded to SlideShare. exported to PDF
  29. 29. TAKE A MOMENT Press b or period on your keyboard to enter the 'paused'mode. This mode is helpfulwhen you wantto take distractingslides off the screen duringapresentation.
  30. 30. STELLAR LINKS Trythe online editor Source code on GitHub Follow me on Twitter
  31. 31. THE END BY 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.

×