reveal.js 3.0.0
73 likes6,485,131 views
Reveal.js is an HTML presentation framework that allows users to create beautiful presentations using HTML. It has features like vertical slides, nested slides, Markdown support, different transition styles, themes, slide backgrounds, images, video, tables, quotes, and linking between slides. Presentations can be exported to PDF and custom states and events can be triggered on each slide. The framework is touch optimized and works on devices like mobile phones and tablets.
![PRETTYÂ CODE
function 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](https://image.slidesharecdn.com/reveal-141218112422-conversion-gate01/85/reveal-js-3-0-0-20-320.jpg)
reveal.js 3.0.0
- 1. REVEAL.JS THEÂ HTMLÂ PRESENTATIONÂ FRAMEWORK Created by /Hakim El Hattab @hakimel
- 2. HELLOÂ THERE reveal.js is a framework that enables you to create beautiful presentations using HTML. This demo presentation will tell you more about what you can do with it.
- 3. VERTICALÂ SLIDES Slides can be nested inside of each other. Use the Space key to navigate through all slides.
- 4. BASEMENTÂ LEVELÂ 1 Nested slides are useful for adding additional detail underneath a high level horizontal slide.
- 5. BASEMENTÂ LEVELÂ 2 That's it, time to go back up.
- 6. SLIDES Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at .http://slides.com
- 7. POINTÂ OFÂ VIEW Press 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
- 8. TOUCHÂ OPTIMIZED Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
- 9. MARKDOWNÂ SUPPORT Write content using inline or external Markdown. Instructions and more info available in the .readme <section data-markdown> ## Markdown support Write content using inline or external Markdown. Instructions and more info available in the [readme](https://github.com/hakimel/reve </section>
- 10. FRAGMENTS Hit the next arrow... ... to step through ... ... a fragmented slide.
- 11. FRAGMENTÂ STYLES There's different types of fragments, like: grow shrink roll-in highlight-red highlight-blue
- 12. TRANSITIONÂ STYLES You can select from different transitions, like: - - - - -None Fade Slide Convex Concave Zoom
- 13. THEMES reveal.js comes with a few themes built in: - - - - - - - - Black (default) White League Sky Beige Simple Serif Night Moon Solarized * Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link>.
- 14. SLIDEÂ BACKGROUNDS Set data-background="#dddddd"on a slide to change the background color. All CSS color formats are supported.
- 16. TILEDÂ BACKGROUNDS <section data-background="image.png" data-background-repeat="repeat" data-ba ckground-size="100px">
- 18. BACKGROUNDÂ TRANSITIONS Different background transitions are available via the backgroundTransition option. This one's called "zoom". Reveal.configure({ backgroundTransition: 'zoom' })
- 19. BACKGROUNDÂ TRANSITIONS You can override background transitions per-slide. <section data-background-transition="zoom">
- 20. PRETTYÂ CODE function 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
- 21. MARVELOUSÂ LIST No order here Or here Or here Or here
- 22. FANTASTICÂ ORDEREDÂ LIST 1. One is smaller than... 2. Two is smaller than... 3. Three!
- 23. TABULARÂ TABLES Item Value Quantity Apples $1 7 Lemonade $2 18 Bread $3 2
- 24. CLEVERÂ QUOTES These 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.â
- 25. INTERGALACTIC INTERCONNECTIONS You can link between slides internally, .like this
- 26. SPEAKERÂ VIEW There's a . It includes a timer, preview of the upcoming slide as well as your speaker notes. speaker view Press the S key to try it out.
- 27. EXPORTÂ TOÂ PDF Presentations can be , below is an example that's been uploaded to SlideShare. exported to PDF
- 28. GLOBALÂ STATE Set data-state="something"on a slide and "something"will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.
- 29. STATEÂ EVENTS Additionally custom events can be triggered on a per slide basis by binding to the data-statename. Reveal.addEventListener( 'customevent', function() { console.log( '"customevent" has fired' ); } );
- 30. TAKEÂ AÂ MOMENT Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
- 32. STELLARÂ LINKS Try the online editor Source code on GitHub Follow me on Twitter