2012-10-21 03:14:50 +02:00
<!doctype html>
2011-06-07 21:10:59 +02:00
< html lang = "en" >
2012-10-21 03:14:50 +02:00
2011-06-07 21:10:59 +02:00
< head >
< meta charset = "utf-8" >
2012-10-21 03:14:50 +02:00
2012-08-12 02:25:55 +02:00
< title > reveal.js - The HTML Presentation Framework< / title >
2011-12-31 07:33:19 +01:00
2012-08-08 07:14:12 +02:00
< meta name = "description" content = "A framework for easily creating beautiful presentations using HTML" >
2011-12-31 07:33:19 +01:00
< meta name = "author" content = "Hakim El Hattab" >
2012-05-07 04:05:58 +02: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 03:14:50 +02:00
2014-05-15 11:42:44 +02:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" >
2013-01-30 00:59:36 +01:00
2014-04-06 10:09:25 +02:00
< link rel = "stylesheet" href = "css/reveal.css" >
2014-12-10 18:18:57 +01:00
< link rel = "stylesheet" href = "css/theme/black.css" id = "theme" >
2012-08-08 07:14:12 +02:00
<!-- For syntax highlighting -->
2012-07-10 03:00:51 +02:00
< link rel = "stylesheet" href = "lib/css/zenburn.css" >
2012-08-04 03:49:29 +02:00
2014-04-26 19:16:10 +02:00
<!-- Include the appropriate print stylesheet -->
2012-08-04 21:45:13 +02:00
< script >
2014-04-26 19:16:10 +02: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 21:45:13 +02:00
< / script >
2012-08-04 03:49:29 +02:00
<!-- [if lt IE 9]>
< script src = "lib/js/html5shiv.js" > < / script >
<![endif]-->
2011-06-07 21:10:59 +02:00
< / head >
2012-10-21 03:14:50 +02:00
2011-06-07 21:10:59 +02:00
< body >
2012-10-21 03:14:50 +02:00
2012-06-03 23:30:37 +02:00
< div class = "reveal" >
2012-04-04 06:59:35 +02:00
2011-12-27 06:29:00 +01:00
<!-- Any section element inside of this container is displayed as a slide -->
< div class = "slides" >
< section >
< h1 > Reveal.js< / h1 >
2014-11-05 11:54:49 +01:00
< h3 > The HTML Presentation Framework< / h3 >
2012-10-29 04:55:19 +01: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 06:29:00 +01:00
< / section >
2012-10-21 03:14:50 +02:00
2011-06-07 21:10:59 +02:00
< section >
2014-09-28 12:27:48 +02:00
< h2 > Hello There< / h2 >
2011-06-07 21:10:59 +02:00
< p >
2014-09-28 12:27:48 +02:00
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.
2011-12-27 06:29:00 +01:00
< / p >
2011-06-07 21:10:59 +02:00
< / section >
2012-10-21 03:14:50 +02:00
2011-12-27 06:29:00 +01:00
<!-- Example of nested vertical slides -->
2011-06-07 21:10:59 +02:00
< section >
2011-12-27 06:29:00 +01:00
< section >
< h2 > Vertical Slides< / h2 >
2014-09-28 12:48:37 +02: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 11:55:38 +01:00
< a href = "#" class = "navigate-down" >
2014-04-22 15:41:08 +02:00
< img width = "178" height = "238" data-src = "https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt = "Down arrow" >
2011-12-27 06:29:00 +01:00
< / a >
< / section >
< section >
< h2 > Basement Level 1< / h2 >
2014-09-28 12:48:37 +02:00
< p > Nested slides are useful for adding additional detail underneath a high level horizontal slide.< / p >
2011-12-27 06:29:00 +01:00
< / section >
< section >
< h2 > Basement Level 2< / h2 >
< p > That's it, time to go back up.< / p >
2014-09-28 12:48:37 +02:00
< br >
2014-02-17 11:55:38 +01:00
< a href = "#/2" >
2014-04-22 15:41:08 +02:00
< img width = "178" height = "238" data-src = "https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt = "Up arrow" style = "-webkit-transform: rotate(180deg);" >
2011-12-27 06:29:00 +01:00
< / a >
< / section >
2011-06-07 21:10:59 +02:00
< / section >
2011-12-27 06:29:00 +01:00
2011-06-07 21:10:59 +02:00
< section >
2013-05-04 20:57:41 +02:00
< h2 > Slides< / h2 >
2011-12-27 06:29:00 +01:00
< p >
2014-06-09 17:54:31 +02:00
Not a coder? No 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 06:29:00 +01:00
< / p >
2011-12-27 06:57:37 +01:00
< / section >
2012-09-10 04:04:50 +02:00
< section >
2013-05-04 20:57:41 +02:00
< h2 > Point of View< / h2 >
2012-09-10 04:04:50 +02:00
< p >
2013-05-04 20:57:41 +02: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 04:04:50 +02:00
< / p >
< / section >
2012-06-02 23:58:09 +02:00
< section >
2014-11-05 12:54:00 +01:00
< h2 > Touch Optimized< / h2 >
2012-06-02 23:58:09 +02:00
< p >
2014-11-05 12:54:00 +01:00
Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
2012-06-02 23:58:09 +02:00
< / p >
< / section >
2012-07-31 07:35:16 +02:00
< section data-markdown >
2012-10-08 15:15:36 +02:00
< script type = "text/template" >
## Markdown support
2012-10-21 03:14:50 +02:00
2014-11-05 12:54:00 +01: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 07:35:16 +02:00
2013-05-04 22:07:49 +02:00
```
< section data-markdown >
## Markdown support
2014-11-05 12:54:00 +01: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 22:07:49 +02:00
< / section >
```
2012-10-08 15:15:36 +02:00
< / script >
2012-07-31 07:35:16 +02:00
< / section >
2014-11-05 12:54:00 +01:00
< section >
< section id = "fragments" >
< h2 > Fragments< / h2 >
< p > Hit the next arrow...< / p >
< p class = "fragment" > ... to step through ...< / p >
2014-12-10 18:18:57 +01:00
< p > < span class = "fragment" > ... a< / span > < span class = "fragment" > fragmented< / span > < span class = "fragment" > slide.< / span > < / p >
2014-11-05 12:54:00 +01: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 18:18:57 +01:00
< p > There's different types of fragments, like:< / p >
2014-11-05 12:54:00 +01: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 18:18:57 +01:00
< p class = "fragment highlight-red" > highlight-red< / p >
< p class = "fragment highlight-blue" > highlight-blue< / p >
2014-11-05 12:54:00 +01:00
< / section >
< / section >
2012-10-10 15:32:57 +02:00
< section id = "transitions" >
2012-07-31 07:35:16 +02:00
< h2 > Transition Styles< / h2 >
< p >
2012-08-30 07:32:18 +02:00
You can select from different transitions, like: < br >
2012-10-21 03:14:50 +02:00
< a href = "?transition=none#/transitions" > None< / a > -
2014-04-06 11:04:58 +02:00
< a href = "?transition=fade#/transitions" > Fade< / a > -
< a href = "?transition=slide#/transitions" > Slide< / a > -
2014-11-05 12:54:00 +01:00
< a href = "?transition=convex#/transitions" > Convex< / a > -
2014-04-06 11:04:58 +02:00
< a href = "?transition=concave#/transitions" > Concave< / a > -
< a href = "?transition=zoom#/transitions" > Zoom< / a >
2012-07-31 07:35:16 +02:00
< / p >
< / section >
2012-10-10 12:49:05 +02:00
< section id = "themes" >
2012-08-30 06:59:51 +02:00
< h2 > Themes< / h2 >
< p >
2014-12-10 18:18:57 +01:00
reveal.js comes with a few themes built in: < br >
2014-12-10 18:28:14 +01:00
< a href = "?#/themes" > Black (default)< / a > -
< a href = "?theme=league#/themes" > League< / a > -
2012-10-10 12:49:05 +02:00
< a href = "?theme=sky#/themes" > Sky< / a > -
< a href = "?theme=beige#/themes" > Beige< / a > -
< a href = "?theme=simple#/themes" > Simple< / a > -
< a href = "?theme=serif#/themes" > Serif< / a > -
2013-09-04 15:00:26 +02:00
< a href = "?theme=night#/themes" > Night< / a > < br >
2013-12-04 22:41:06 +01:00
< a href = "?theme=moon#/themes" > Moon< / a > -
< a href = "?theme=solarized#/themes" > Solarized< / a >
2012-08-30 06:59:51 +02:00
< / p >
< p >
< small >
2014-11-05 12:54:00 +01:00
* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the < head> using a < link> .
2012-08-30 06:59:51 +02:00
< / small >
< / p >
< / section >
2013-06-04 21:29:32 +02:00
< section >
2014-12-10 18:18:57 +01:00
< section data-background = "#dddddd" >
2013-06-04 21:29:32 +02:00
< h2 > Slide Backgrounds< / h2 >
2012-04-04 06:59:35 +02:00
< p >
2014-12-10 18:18:57 +01:00
Set < code > data-background="#dddddd"< / code > on a slide to change the background color. All CSS color formats are supported.
2012-04-04 06:59:35 +02:00
< / p >
2014-02-17 11:55:38 +01:00
< a href = "#" class = "navigate-down" >
2014-04-22 15:41:08 +02:00
< img width = "178" height = "238" data-src = "https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt = "Down arrow" >
2012-04-04 06:59:35 +02:00
< / a >
< / section >
2014-11-05 12:27:57 +01:00
< section data-background = "https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" >
2013-06-04 21:29:32 +02:00
< h2 > Image Backgrounds< / h2 >
< pre > < code > < section data-background="image.png"> < / code > < / pre >
2012-04-04 06:59:35 +02:00
< / section >
2014-11-05 12:27:57 +01: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 18:18:57 +01:00
< h2 > Tiled Backgrounds< / h2 >
2013-06-04 21:29:32 +02: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 06:59:35 +02:00
< / section >
2014-12-10 20:18:11 +01: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 >
< pre > < code style = "word-wrap: break-word;" > < section data-background-video="http://example.com/video.mp4,http://example.com/video.webm" data-background-color="#000000"> < / code > < / pre >
< / div >
< / section >
2012-03-30 06:13:45 +02:00
< / section >
2014-11-05 12:27:57 +01:00
< section data-transition = "slide" data-background = "#4d7e65" data-background-transition = "zoom" >
2013-06-18 14:53:15 +02:00
< h2 > Background Transitions< / h2 >
< p >
2014-12-10 18:18:57 +01:00
Different background transitions are available via the backgroundTransition option. This one's called "zoom".
2013-06-18 14:53:15 +02:00
< / p >
2014-12-10 18:18:57 +01:00
< pre > < code > Reveal.configure({ backgroundTransition: 'zoom' })< / code > < / pre >
2013-06-18 14:53:15 +02:00
< / section >
2014-12-10 18:18:57 +01:00
< section data-transition = "slide" data-background = "#b5533c" data-background-transition = "zoom" >
2014-11-05 12:27:57 +01:00
< h2 > Background Transitions< / h2 >
2013-06-18 14:53:15 +02:00
< p >
2014-12-10 18:18:57 +01:00
You can override background transitions per-slide.
2013-06-18 14:53:15 +02:00
< / p >
2014-12-10 18:18:57 +01:00
< pre > < code style = "word-wrap: break-word;" > < section data-background-transition="zoom"> < / code > < / pre >
2013-06-18 14:53:15 +02:00
< / section >
2014-12-12 15:52:25 +01: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 >
< p > Courtesy of < a href = "http://softwaremaniacs.org/soft/highlight/en/description/" > highlight.js< / a > .< / p >
< / section >
2014-11-05 12:54:00 +01: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 18:18:57 +01:00
< h2 > Tabular Tables< / h2 >
2014-11-05 12:54:00 +01: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 06:29:00 +01: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 20:57:41 +02:00
“ The nice thing about standards is that there are so many to choose from” < / q > and block:
2011-12-27 06:29:00 +01:00
< / p >
< blockquote cite = "http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations" >
2013-05-04 20:57:41 +02: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 06:29:00 +01:00
< / blockquote >
< / section >
2012-10-21 03:14:50 +02:00
2011-12-27 06:29:00 +01:00
< section >
< h2 > Intergalactic Interconnections< / h2 >
< p >
2012-08-04 21:45:13 +02:00
You can link between slides internally,
2011-12-27 06:29:00 +01:00
< a href = "#/2/3" > like this< / a > .
< / p >
< / section >
2011-12-05 03:07:33 +01:00
2011-12-27 06:29:00 +01:00
< section >
2014-12-12 15:52:25 +01: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 06:29:00 +01:00
< / section >
2012-10-21 03:14:50 +02:00
2012-08-04 22:16:23 +02:00
< section >
< h2 > Export to PDF< / h2 >
2012-08-05 00:19:50 +02:00
< p > Presentations can be < a href = "https://github.com/hakimel/reveal.js#pdf-export" > exported to PDF< / a > , below is an example that's been uploaded to SlideShare.< / p >
2012-08-13 03:46:06 +02:00
< iframe id = "slideshare" src = "http://www.slideshare.net/slideshow/embed_code/13872948" width = "455" height = "356" style = "margin:0;overflow:hidden;border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen > < / iframe >
< script >
document.getElementById('slideshare').attributeName = 'allowfullscreen';
< / script >
2012-08-04 22:16:23 +02:00
< / section >
2012-10-21 03:14:50 +02:00
2014-12-12 15:52:25 +01: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 06:08:50 +02:00
< section >
< h2 > Take a Moment< / h2 >
< p >
2014-12-10 18:18:57 +01: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 06:08:50 +02:00
< / p >
< / section >
2014-12-12 15:52:25 +01:00
< section >
< h2 > Much more< / h2 >
< ul >
< li > Right-to-left support< / li >
< 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 >
< / ul >
< / section >
2011-12-27 06:29:00 +01:00
< section >
< h2 > Stellar Links< / h2 >
< ul >
2013-05-04 20:57:41 +02:00
< li > < a href = "http://slid.es" > Try the online editor< / a > < / li >
2012-09-17 03:50:11 +02:00
< li > < a href = "https://github.com/hakimel/reveal.js" > Source code on GitHub< / a > < / li >
2011-12-27 06:29:00 +01:00
< li > < a href = "http://twitter.com/hakimel" > Follow me on Twitter< / a > < / li >
< / ul >
< / section >
2012-10-01 00:14:27 +02:00
2011-12-27 06:29:00 +01:00
< section >
< h1 > THE END< / h1 >
2012-08-08 07:14:12 +02:00
< h3 > BY Hakim El Hattab / hakim.se< / h3 >
2011-12-27 06:29:00 +01:00
< / section >
2012-10-08 15:15:36 +02:00
2011-12-27 06:29:00 +01:00
< / div >
2012-10-21 03:14:50 +02:00
2011-06-07 21:10:59 +02:00
< / div >
2012-03-24 17:48:16 +01:00
2012-07-10 03:00:51 +02:00
< script src = "lib/js/head.min.js" > < / script >
2014-04-06 10:09:25 +02:00
< script src = "js/reveal.js" > < / script >
2012-07-10 02:51:04 +02:00
2011-12-05 03:07:33 +01:00
< script >
2012-10-20 16:57:51 +02:00
2012-08-12 02:25:55 +02:00
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
2012-11-10 16:02:19 +01:00
center: true,
2012-10-21 03:14:50 +02:00
2014-11-05 10:38:43 +01:00
transition: 'slide', // none/fade/slide/convex/concave/zoom
2013-03-09 01:05:58 +01:00
2012-08-12 02:25:55 +02:00
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
2013-05-01 22:10:31 +02:00
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
2012-10-28 23:09:54 +01:00
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
2014-07-22 10:30:26 +02:00
{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
2014-09-28 13:05:53 +02:00
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
2012-08-12 02:25:55 +02:00
]
});
2012-10-28 23:09:54 +01:00
2012-08-04 21:53:52 +02:00
< / script >
2012-08-01 05:47:09 +02:00
2011-06-07 21:10:59 +02:00
< / body >
2012-08-04 06:33:27 +02:00
< / html >
