2012-10-21 01:14:50 +00:00
<!doctype html>
2011-06-07 19:10:59 +00:00
< html lang = "en" >
2012-10-21 01:14:50 +00:00
2011-06-07 19:10:59 +00:00
< head >
< meta charset = "utf-8" >
2012-10-21 01:14:50 +00:00
2012-08-12 00:25:55 +00:00
< title > reveal.js - The HTML Presentation Framework< / title >
2011-12-31 06:33:19 +00:00
2012-08-08 05:14:12 +00:00
< meta name = "description" content = "A framework for easily creating beautiful presentations using HTML" >
2011-12-31 06:33:19 +00:00
< meta name = "author" content = "Hakim El Hattab" >
2012-05-07 02:05:58 +00:00
< meta name = "apple-mobile-web-app-capable" content = "yes" / >
< meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" / >
2012-10-21 01:14:50 +00:00
2014-05-15 09:42:44 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" >
2013-01-29 23:59:36 +00:00
2014-04-06 08:09:25 +00:00
< link rel = "stylesheet" href = "css/reveal.css" >
2014-12-10 17:18:57 +00:00
< link rel = "stylesheet" href = "css/theme/black.css" id = "theme" >
2012-08-08 05:14:12 +00:00
2014-12-27 20:16:44 +00:00
<!-- Code syntax highlighting -->
2012-07-10 01:00:51 +00:00
< link rel = "stylesheet" href = "lib/css/zenburn.css" >
2012-08-04 01:49:29 +00:00
2014-12-27 20:16:44 +00:00
<!-- Printing and PDF exports -->
2012-08-04 19:45:13 +00:00
< script >
2014-04-26 17:16:10 +00:00
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
2012-08-04 19:45:13 +00:00
< / script >
2012-08-04 01:49:29 +00:00
<!-- [if lt IE 9]>
< script src = "lib/js/html5shiv.js" > < / script >
<![endif]-->
2011-06-07 19:10:59 +00:00
< / head >
2012-10-21 01:14:50 +00:00
2011-06-07 19:10:59 +00:00
< body >
2012-10-21 01:14:50 +00:00
2012-06-03 21:30:37 +00:00
< div class = "reveal" >
2012-04-04 04:59:35 +00:00
2011-12-27 05:29:00 +00:00
<!-- Any section element inside of this container is displayed as a slide -->
< div class = "slides" >
< section >
< h1 > Reveal.js< / h1 >
2014-11-05 10:54:49 +00:00
< h3 > The HTML Presentation Framework< / h3 >
2012-10-29 03:55:19 +00:00
< p >
< small > Created by < a href = "http://hakim.se" > Hakim El Hattab< / a > / < a href = "http://twitter.com/hakimel" > @hakimel< / a > < / small >
< / p >
2011-12-27 05:29:00 +00:00
< / section >
2012-10-21 01:14:50 +00:00
2011-06-07 19:10:59 +00:00
< section >
2014-09-28 10:27:48 +00:00
< h2 > Hello There< / h2 >
2011-06-07 19:10:59 +00:00
< p >
2015-01-08 08:58:06 +00:00
reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
2011-12-27 05:29:00 +00:00
< / p >
2011-06-07 19:10:59 +00:00
< / section >
2012-10-21 01:14:50 +00:00
2011-12-27 05:29:00 +00:00
<!-- Example of nested vertical slides -->
2011-06-07 19:10:59 +00:00
< section >
2011-12-27 05:29:00 +00:00
< section >
< h2 > Vertical Slides< / h2 >
2014-09-28 10:48:37 +00:00
< p > Slides can be nested inside of each other.< / p >
< p > Use the < em > Space< / em > key to navigate through all slides.< / p >
< br >
2014-02-17 10:55:38 +00:00
< a href = "#" class = "navigate-down" >
2014-04-22 13:41:08 +00:00
< img width = "178" height = "238" data-src = "https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt = "Down arrow" >
2011-12-27 05:29:00 +00:00
< / a >
< / section >
< section >
< h2 > Basement Level 1< / h2 >
2014-09-28 10:48:37 +00:00
< p > Nested slides are useful for adding additional detail underneath a high level horizontal slide.< / p >
2011-12-27 05:29:00 +00:00
< / section >
< section >
< h2 > Basement Level 2< / h2 >
< p > That's it, time to go back up.< / p >
2014-09-28 10:48:37 +00:00
< br >
2014-02-17 10:55:38 +00:00
< a href = "#/2" >
2015-04-03 10:26:40 +00:00
< img width = "178" height = "238" data-src = "https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt = "Up arrow" style = "transform: rotate(180deg); -webkit-transform: rotate(180deg);" >
2011-12-27 05:29:00 +00:00
< / a >
< / section >
2011-06-07 19:10:59 +00:00
< / section >
2011-12-27 05:29:00 +00:00
2011-06-07 19:10:59 +00:00
< section >
2013-05-04 18:57:41 +00:00
< h2 > Slides< / h2 >
2011-12-27 05:29:00 +00:00
< p >
2015-01-08 08:58:06 +00:00
Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at < a href = "http://slides.com" target = "_blank" > http://slides.com< / a > .
2011-12-27 05:29:00 +00:00
< / p >
2011-12-27 05:57:37 +00:00
< / section >
2012-09-10 02:04:50 +00:00
< section >
2013-05-04 18:57:41 +00:00
< h2 > Point of View< / h2 >
2012-09-10 02:04:50 +00:00
< p >
2013-05-04 18:57:41 +00:00
Press < strong > ESC< / strong > to enter the slide overview.
< / p >
< p >
Hold down alt and click on any element to zoom in on it using < a href = "http://lab.hakim.se/zoom-js" > zoom.js< / a > . Alt + click anywhere to zoom back out.
2012-09-10 02:04:50 +00:00
< / p >
< / section >
2012-06-02 21:58:09 +00:00
< section >
2014-11-05 11:54:00 +00:00
< h2 > Touch Optimized< / h2 >
2012-06-02 21:58:09 +00:00
< p >
2014-11-05 11:54:00 +00:00
Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
2012-06-02 21:58:09 +00:00
< / p >
< / section >
2012-07-31 05:35:16 +00:00
< section data-markdown >
2012-10-08 13:15:36 +00:00
< script type = "text/template" >
## Markdown support
2012-10-21 01:14:50 +00:00
2014-11-05 11:54:00 +00:00
Write content using inline or external Markdown.
Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
2012-07-31 05:35:16 +00:00
2013-05-04 20:07:49 +00:00
```
< section data-markdown >
## Markdown support
2014-11-05 11:54:00 +00:00
Write content using inline or external Markdown.
Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
2013-05-04 20:07:49 +00:00
< / section >
```
2012-10-08 13:15:36 +00:00
< / script >
2012-07-31 05:35:16 +00:00
< / section >
2014-11-05 11:54:00 +00:00
< section >
< section id = "fragments" >
< h2 > Fragments< / h2 >
< p > Hit the next arrow...< / p >
< p class = "fragment" > ... to step through ...< / p >
2014-12-10 17:18:57 +00:00
< p > < span class = "fragment" > ... a< / span > < span class = "fragment" > fragmented< / span > < span class = "fragment" > slide.< / span > < / p >
2014-11-05 11:54:00 +00:00
< aside class = "notes" >
This slide has fragments which are also stepped through in the notes window.
< / aside >
< / section >
< section >
< h2 > Fragment Styles< / h2 >
2014-12-10 17:18:57 +00:00
< p > There's different types of fragments, like:< / p >
2014-11-05 11:54:00 +00:00
< p class = "fragment grow" > grow< / p >
< p class = "fragment shrink" > shrink< / p >
< p class = "fragment roll-in" > roll-in< / p >
< p class = "fragment fade-out" > fade-out< / p >
< p class = "fragment current-visible" > current-visible< / p >
2014-12-10 17:18:57 +00:00
< p class = "fragment highlight-red" > highlight-red< / p >
< p class = "fragment highlight-blue" > highlight-blue< / p >
2014-11-05 11:54:00 +00:00
< / section >
< / section >
2012-10-10 13:32:57 +00:00
< section id = "transitions" >
2012-07-31 05:35:16 +00:00
< h2 > Transition Styles< / h2 >
< p >
2012-08-30 05:32:18 +00:00
You can select from different transitions, like: < br >
2012-10-21 01:14:50 +00:00
< a href = "?transition=none#/transitions" > None< / a > -
2014-04-06 09:04:58 +00:00
< a href = "?transition=fade#/transitions" > Fade< / a > -
< a href = "?transition=slide#/transitions" > Slide< / a > -
2014-11-05 11:54:00 +00:00
< a href = "?transition=convex#/transitions" > Convex< / a > -
2014-04-06 09:04:58 +00:00
< a href = "?transition=concave#/transitions" > Concave< / a > -
< a href = "?transition=zoom#/transitions" > Zoom< / a >
2012-07-31 05:35:16 +00:00
< / p >
< / section >
2012-10-10 10:49:05 +00:00
< section id = "themes" >
2012-08-30 04:59:51 +00:00
< h2 > Themes< / h2 >
< p >
2014-12-10 17:18:57 +00:00
reveal.js comes with a few themes built in: < br >
2014-12-18 16:45:51 +00:00
<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
2014-12-18 16:53:08 +00:00
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;" > Black (default)< / a > -
2014-12-18 16:45:51 +00:00
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/white.css'); return false;" > White< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/league.css'); return false;" > League< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/sky.css'); return false;" > Sky< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;" > Beige< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;" > Simple< / a > < br >
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;" > Serif< / a > -
2015-03-02 11:28:47 +00:00
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/blood.css'); return false;" > Blood< / a > -
2014-12-18 16:45:51 +00:00
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;" > Night< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;" > Moon< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;" > Solarized< / a >
2012-08-30 04:59:51 +00:00
< / p >
< / section >
2013-06-04 19:29:32 +00:00
< section >
2014-12-10 17:18:57 +00:00
< section data-background = "#dddddd" >
2013-06-04 19:29:32 +00:00
< h2 > Slide Backgrounds< / h2 >
2012-04-04 04:59:35 +00:00
< p >
2014-12-10 17:18:57 +00:00
Set < code > data-background="#dddddd"< / code > on a slide to change the background color. All CSS color formats are supported.
2012-04-04 04:59:35 +00:00
< / p >
2014-02-17 10:55:38 +00:00
< a href = "#" class = "navigate-down" >
2014-04-22 13:41:08 +00:00
< img width = "178" height = "238" data-src = "https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt = "Down arrow" >
2012-04-04 04:59:35 +00:00
< / a >
< / section >
2014-11-05 11:27:57 +00:00
< section data-background = "https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" >
2013-06-04 19:29:32 +00:00
< h2 > Image Backgrounds< / h2 >
< pre > < code > < section data-background="image.png"> < / code > < / pre >
2012-04-04 04:59:35 +00:00
< / section >
2014-11-05 11:27:57 +00:00
< section data-background = "https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat = "repeat" data-background-size = "100px" >
2014-12-10 17:18:57 +00:00
< h2 > Tiled Backgrounds< / h2 >
2013-06-04 19:29:32 +00:00
< pre > < code style = "word-wrap: break-word;" > < section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"> < / code > < / pre >
2012-04-04 04:59:35 +00:00
< / section >
2014-12-10 19:18:11 +00:00
< section data-background-video = "https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color = "#000000" >
< div style = "background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;" >
< h2 > Video Backgrounds< / h2 >
2015-01-09 17:14:03 +00:00
< pre > < code style = "word-wrap: break-word;" > < section data-background-video="video.mp4,video.webm"> < / code > < / pre >
2014-12-10 19:18:11 +00:00
< / div >
< / section >
2015-01-30 09:52:28 +00:00
< section data-background = "http://i.giphy.com/90F8aUepslB84.gif" >
< h2 > ... and GIFs!< / h2 >
< / section >
2012-03-30 04:13:45 +00:00
< / section >
2014-11-05 11:27:57 +00:00
< section data-transition = "slide" data-background = "#4d7e65" data-background-transition = "zoom" >
2013-06-18 12:53:15 +00:00
< h2 > Background Transitions< / h2 >
< p >
2014-12-10 17:18:57 +00:00
Different background transitions are available via the backgroundTransition option. This one's called "zoom".
2013-06-18 12:53:15 +00:00
< / p >
2014-12-10 17:18:57 +00:00
< pre > < code > Reveal.configure({ backgroundTransition: 'zoom' })< / code > < / pre >
2013-06-18 12:53:15 +00:00
< / section >
2014-12-10 17:18:57 +00:00
< section data-transition = "slide" data-background = "#b5533c" data-background-transition = "zoom" >
2014-11-05 11:27:57 +00:00
< h2 > Background Transitions< / h2 >
2013-06-18 12:53:15 +00:00
< p >
2014-12-10 17:18:57 +00:00
You can override background transitions per-slide.
2013-06-18 12:53:15 +00:00
< / p >
2014-12-10 17:18:57 +00:00
< pre > < code style = "word-wrap: break-word;" > < section data-background-transition="zoom"> < / code > < / pre >
2013-06-18 12:53:15 +00:00
< / section >
2014-12-12 14:52:25 +00:00
< section >
< h2 > Pretty Code< / h2 >
< pre > < code data-trim contenteditable >
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';
}
}
}
}
< / code > < / pre >
2015-01-08 08:58:06 +00:00
< p > Code syntax highlighting courtesy of < a href = "http://softwaremaniacs.org/soft/highlight/en/description/" > highlight.js< / a > .< / p >
2014-12-12 14:52:25 +00:00
< / section >
2014-11-05 11:54:00 +00:00
< section >
< h2 > Marvelous List< / h2 >
< ul >
< li > No order here< / li >
< li > Or here< / li >
< li > Or here< / li >
< li > Or here< / li >
< / ul >
< / section >
< section >
< h2 > Fantastic Ordered List< / h2 >
< ol >
< li > One is smaller than...< / li >
< li > Two is smaller than...< / li >
< li > Three!< / li >
< / ol >
< / section >
< section >
2014-12-10 17:18:57 +00:00
< h2 > Tabular Tables< / h2 >
2014-11-05 11:54:00 +00:00
< table >
< thead >
< tr >
< th > Item< / th >
< th > Value< / th >
< th > Quantity< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > Apples< / td >
< td > $1< / td >
< td > 7< / td >
< tr >
< tr >
< td > Lemonade< / td >
< td > $2< / td >
< td > 18< / td >
< tr >
< tr >
< td > Bread< / td >
< td > $3< / td >
< td > 2< / td >
< tr >
< / tbody >
< / table >
< / section >
2011-12-27 05:29:00 +00:00
< section >
< h2 > Clever Quotes< / h2 >
< p >
These guys come in two forms, inline: < q cite = "http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations" >
2013-05-04 18:57:41 +00:00
“ The nice thing about standards is that there are so many to choose from” < / q > and block:
2011-12-27 05:29:00 +00:00
< / p >
< blockquote cite = "http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations" >
2013-05-04 18:57:41 +00:00
“ 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.”
2011-12-27 05:29:00 +00:00
< / blockquote >
< / section >
2012-10-21 01:14:50 +00:00
2011-12-27 05:29:00 +00:00
< section >
< h2 > Intergalactic Interconnections< / h2 >
< p >
2012-08-04 19:45:13 +00:00
You can link between slides internally,
2011-12-27 05:29:00 +00:00
< a href = "#/2/3" > like this< / a > .
< / p >
< / section >
2011-12-05 02:07:33 +00:00
2011-12-27 05:29:00 +00:00
< section >
2014-12-12 14:52:25 +00:00
< h2 > Speaker View< / h2 >
< p > There's a < a href = "https://github.com/hakimel/reveal.js#speaker-notes" > speaker view< / a > . It includes a timer, preview of the upcoming slide as well as your speaker notes.< / p >
< p > Press the < em > S< / em > key to try it out.< / p >
< aside class = "notes" >
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
< / aside >
2011-12-27 05:29:00 +00:00
< / section >
2012-10-21 01:14:50 +00:00
2012-08-04 20:16:23 +00:00
< section >
< h2 > Export to PDF< / h2 >
2014-12-18 17:27:48 +00:00
< p > Presentations can be < a href = "https://github.com/hakimel/reveal.js#pdf-export" > exported to PDF< / a > , here's an example:< / p >
< iframe src = "//www.slideshare.net/slideshow/embed_code/42840540" width = "445" height = "355" frameborder = "0" marginwidth = "0" marginheight = "0" scrolling = "no" style = "border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen > < / iframe >
2012-08-04 20:16:23 +00:00
< / section >
2012-10-21 01:14:50 +00:00
2014-12-12 14:52:25 +00:00
< section >
< h2 > Global State< / h2 >
< p >
Set < code > data-state="something"< / code > on a slide and < code > "something"< / code >
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.
< / p >
< / section >
< section data-state = "customevent" >
< h2 > State Events< / h2 >
< p >
Additionally custom events can be triggered on a per slide basis by binding to the < code > data-state< / code > name.
< / p >
< pre > < code class = "javascript" data-trim contenteditable style = "font-size: 18px;" >
Reveal.addEventListener( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
< / code > < / pre >
< / section >
2012-10-08 04:08:50 +00:00
< section >
< h2 > Take a Moment< / h2 >
< p >
2014-12-10 17:18:57 +00:00
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.
2012-10-08 04:08:50 +00:00
< / p >
< / section >
2014-12-12 14:52:25 +00:00
< section >
< h2 > Much more< / h2 >
< ul >
< li > Right-to-left support< / li >
2015-01-08 08:58:06 +00:00
< li > < a href = "https://github.com/hakimel/reveal.js#api" > Extensive JavaScript API< / a > < / li >
2014-12-12 14:52:25 +00:00
< li > < a href = "https://github.com/hakimel/reveal.js#auto-sliding" > Auto-progression< / a > < / li >
< li > < a href = "https://github.com/hakimel/reveal.js#parallax-background" > Parallax backgrounds< / a > < / li >
2015-01-08 08:58:06 +00:00
< li > < a href = "https://github.com/hakimel/reveal.js#keyboard-bindings" > Custom keyboard bindings< / a > < / li >
2014-12-12 14:52:25 +00:00
< / ul >
< / section >
2015-01-08 08:58:06 +00:00
< section style = "text-align: left;" >
2011-12-27 05:29:00 +00:00
< h1 > THE END< / h1 >
2015-01-08 08:58:06 +00:00
< p >
- < a href = "http://slides.com" > Try the online editor< / a > < br >
- < a href = "https://github.com/hakimel/reveal.js" > Source code & documentation< / a >
< / p >
2011-12-27 05:29:00 +00:00
< / section >
2012-10-08 13:15:36 +00:00
2011-12-27 05:29:00 +00:00
< / div >
2012-10-21 01:14:50 +00:00
2011-06-07 19:10:59 +00:00
< / div >
2012-03-24 16:48:16 +00:00
2012-07-10 01:00:51 +00:00
< script src = "lib/js/head.min.js" > < / script >
2014-04-06 08:09:25 +00:00
< script src = "js/reveal.js" > < / script >
2012-07-10 00:51:04 +00:00
2011-12-05 02:07:33 +00:00
< script >
2012-10-20 14:57:51 +00:00
2014-12-27 20:16:44 +00:00
// Full list of configuration options available at:
2012-08-12 00:25:55 +00:00
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
2012-11-10 15:02:19 +00:00
center: true,
2012-10-21 01:14:50 +00:00
2014-11-05 09:38:43 +00:00
transition: 'slide', // none/fade/slide/convex/concave/zoom
2013-03-09 00:05:58 +00:00
2014-12-27 20:16:44 +00:00
// Optional reveal.js plugins
2012-08-12 00:25:55 +00:00
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
2013-05-01 20:10:31 +00:00
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
2012-10-28 22:09:54 +00:00
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
2014-07-22 08:30:26 +00:00
{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
2014-09-28 11:05:53 +00:00
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
2012-08-12 00:25:55 +00:00
]
});
2012-10-28 22:09:54 +00:00
2012-08-04 19:53:52 +00:00
< / script >
2012-08-01 03:47:09 +00:00
2011-06-07 19:10:59 +00:00
< / body >
2012-08-04 04:33:27 +00:00
< / html >
