Downloaded 10 times
![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](https://image.slidesharecdn.com/reveal-140413095329-phpapp02/85/Revealjs-sample-23-320.jpg)
Uploaded byDmitry Pashkevich
Revealjs sample
This document summarizes the features of Reveal.js, an HTML presentation framework. It describes how Reveal.js allows users to: 1. Create beautiful presentations using HTML that include features like vertical slides, slide transitions, themes, and markdown support. 2. Navigate slides using arrow keys, navigate to an overview mode using ESC, and trigger custom events on a per-slide basis. 3. Change slide backgrounds to colors or images, and override background transitions. 4. Include features like code formatting, quotes, links, and fragment views to step through portions of a slide.
Revealjs sample
- 1. REVEAL.JS HTML PRESENTATIONS MADEEASY Createdby /HakimElHattab @hakimel
- 2. HEADS UP reveal.js isaframework for easilycreatingbeautiful presentations usingHTML. You'llneed abrowser with support for CSS 3D transforms to see itin its fullglory.
- 3. VERTICAL SLIDES Slides canbe nested inside of other slides, trypressing .down
- 4. BASEMENT LEVEL 1 Pressdown or up to navigate.
- 5.
- 6. BASEMENT LEVEL 3 That'sit, time to go back up.
- 7. SLIDES Notacoder?No problem. There'safully-featured visualeditor for authoringthese, tryitoutat .http://slid.es
- 8. POINT OF VIEW PressESC 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. WORKS IN MOBILESAFARI Tryitout!You can swipe through the slides and pinch your way to the overview.
- 10. MARVELOUS UNORDERED LIST Noorder here Or here Or here Or here
- 11. FANTASTIC ORDERED LIST 1.One is smaller than... 2. Two is smaller than... 3. Three!
- 12. MARKDOWN SUPPORT For thoseof 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. TRANSITION STYLES You canselectfrom differenttransitions, like: - - - - - - -Cube Page Concave Zoom Linear Fade None Default
- 14. THEMES Reveal.js comes withafew themes builtin: - - - - - - Default Sky Beige Simple Serif Night Moon Solarized *Themedemosareloadedafterthepresentationwhichleadstoflicker.Inproductionyoushouldloadyour themeinthe<head>usinga<link>.
- 15. GLOBAL STATE Setdata-state="something"on aslideand "something" willbe added as aclass to the documentelementwhen the slide is open. This lets you applybroader style changes, like switching the background.
- 16. CUSTOM EVENTS Additionallycustom eventscan be triggered on aper slide basis bybindingto the data-statename. Reveal.addEventListener('customevent',function(){ console.log('"customevent"hasfired'); });
- 17. SLIDE BACKGROUNDS Setdata-background="#007777"on aslideto change the fullpage background to the given color. AllCSS color formats are supported.
- 18.
- 19.
- 20. BACKGROUND TRANSITIONS Pass reveal.jsthe backgroundTransition: 'slide' configargumentto make backgrounds slide rather than fade.
- 21. BACKGROUND TRANSITION OVERRIDE Youcan override background transitions per slide byusing data-background-transition="slide".
- 22. CLEVER QUOTES These guyscome 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.
- 24. INTERGALACTIC INTERCONNECTIONS You canlink between slides internally, .like this
- 25. FRAGMENTED VIEWS Hitthe nextarrow... ...to step through ... 1. any type 2. of view 3. fragments
- 26. FRAGMENT STYLES There's afewstyles of fragments, like: grow shrink roll-in fade-out highlight-red highlight-green highlight-blue current-visible highlight-current-blue
- 27.
- 28. EXPORT TO PDF Presentationscan be , below is an example that's been uploaded to SlideShare. exported to PDF
- 29. TAKE A MOMENT Pressb or period on your keyboard to enter the 'paused'mode. This mode is helpfulwhen you wantto take distractingslides off the screen duringapresentation.
- 30. STELLAR LINKS Trythe onlineeditor Source code on GitHub Follow me on Twitter
- 31. THE END BY HAKIMEL HATTAB / HAKIM.SE