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
2013-01-30 00:59:36 +01:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
2012-11-11 16:01:05 +01:00
< link rel = "stylesheet" href = "css/reveal.min.css" >
2012-08-30 06:59:51 +02:00
< link rel = "stylesheet" href = "css/theme/default.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
2012-10-01 00:14:27 +02:00
<!-- If the query includes 'print - pdf', use the PDF print sheet -->
2012-08-04 21:45:13 +02:00
< script >
2012-08-12 02:25:55 +02:00
document.write( '< link rel = "stylesheet" href = "css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type = "text/css" media = "print" > ' );
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 >
2012-08-08 07:14:12 +02:00
< h3 > HTML Presentations Made Easy< / 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 >
2011-12-27 06:29:00 +01:00
< h2 > Heads Up< / h2 >
2011-06-07 21:10:59 +02:00
< p >
2012-10-21 03:14:50 +02:00
reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
2011-12-27 06:29:00 +01:00
support for CSS 3D transforms to see it in its full glory.
< / p >
2012-06-08 05:21:14 +02:00
< aside class = "notes" >
2012-10-21 02:40:52 +02:00
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).
2012-06-08 05:21:14 +02:00
< / aside >
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 >
< p >
2012-08-04 20:09:06 +02:00
Slides can be nested inside of other slides,
2012-11-10 17:40:19 +01:00
try pressing < a href = "#" class = "navigate-down" > down< / a > .
2011-12-27 06:29:00 +01:00
< / p >
2012-11-10 17:40:19 +01:00
< a href = "#" class = "image navigate-down" >
2012-08-06 04:52:36 +02:00
< img width = "178" height = "238" 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 >
< p > Press down or up to navigate.< / p >
< / section >
< section >
< h2 > Basement Level 2< / h2 >
< p > Cornify< / p >
2012-01-03 09:24:09 +01:00
< a class = "test" href = "http://cornify.com" >
2012-08-06 04:52:36 +02:00
< img width = "280" height = "326" src = "https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt = "Unicorn" >
2012-01-03 09:24:09 +01:00
< / a >
2011-12-27 06:29:00 +01:00
< / section >
< section >
< h2 > Basement Level 3< / h2 >
< p > That's it, time to go back up.< / p >
< a href = "#/2" class = "image" >
2012-08-06 04:52:36 +02:00
< img width = "178" height = "238" 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 >
2013-05-04 20:57:41 +02:00
Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at < a href = "http://slid.es" target = "_blank" > http://slid.es< / 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 >
< h2 > Works in Mobile Safari< / h2 >
< p >
2012-10-01 00:14:27 +02:00
Try it out! You can swipe through the slides and pinch your way to the overview.
2012-06-02 23:58:09 +02:00
< / p >
< / section >
2011-06-07 21:10:59 +02:00
< section >
2011-12-27 06:29:00 +01:00
< h2 > Marvelous Unordered List< / h2 >
< ul >
< li > No order here< / li >
< li > Or here< / li >
< li > Or here< / li >
< li > Or here< / li >
< / ul >
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
< section >
< h2 > Fantastic Ordered List< / h2 >
< ol >
< li > One is smaller than...< / li >
< li > Two is smaller than...< / li >
< li > Three!< / li >
< / ol >
< / section >
2011-12-05 03:07:33 +01:00
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
2012-10-08 15:15:36 +02:00
For those of you who like that sort of thing. Instructions and a bit more info available [here](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
For those of you who like that sort of thing.
Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
< / section >
```
2012-10-08 15:15:36 +02:00
< / script >
2012-07-31 07:35:16 +02:00
< / 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-10 15:32:57 +02:00
< a href = "?transition=cube#/transitions" > Cube< / a > -
< a href = "?transition=page#/transitions" > Page< / a > -
< a href = "?transition=concave#/transitions" > Concave< / a > -
2012-10-21 03:14:50 +02:00
< a href = "?transition=zoom#/transitions" > Zoom< / a > -
< a href = "?transition=linear#/transitions" > Linear< / a > -
2013-01-16 21:49:10 +01:00
< a href = "?transition=fade#/transitions" > Fade< / a > -
2012-10-21 03:14:50 +02:00
< a href = "?transition=none#/transitions" > None< / a > -
2012-10-10 15:32:57 +02:00
< a href = "?#/transitions" > Default< / 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 >
Reveal.js comes with a few themes built in: < br >
2013-09-04 15:00:26 +02:00
< a href = "?#/themes" > Default< / 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-09-02 22:44:14 +02:00
< a href = "?theme=moon.css#/themes" > Moon< / a > -
< a href = "?theme=simple.css#/themes" > Simple< / a > -
2013-09-04 15:00:26 +02:00
< a href = "?theme=solarized.css#/themes" > Solarized< / a >
2012-08-30 06:59:51 +02:00
< / p >
< p >
< small >
* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the < code > < head> < / code > using a < code > < link> < / code > .
< / small >
< / p >
< / section >
2012-04-04 06:59:35 +02:00
< section >
2013-06-04 21:29:32 +02:00
< 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 background.
< / p >
< / section >
2013-06-10 08:43:01 +02:00
< section data-state = "customevent" >
< h2 > Custom 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 data-trim contenteditable style = "font-size: 18px; margin-top: 20px;" >
Reveal.addEventListener( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
< / code > < / pre >
< / section >
2013-06-04 21:29:32 +02:00
< section >
< section data-background = "#007777" >
< h2 > Slide Backgrounds< / h2 >
2012-04-04 06:59:35 +02:00
< p >
2013-06-04 21:29:32 +02:00
Set < code > data-background="#007777"< / code > on a slide to change the full page background to the given color. All CSS color formats are supported.
2012-04-04 06:59:35 +02:00
< / p >
2012-11-10 17:40:19 +01:00
< a href = "#" class = "image navigate-down" >
2012-08-06 04:52:36 +02:00
< img width = "178" height = "238" src = "https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt = "Down arrow" >
2012-04-04 06:59:35 +02:00
< / a >
< / section >
2013-06-09 16:12:50 +02:00
< section data-background = "https://s3.amazonaws.com/hakim-static/reveal-js/arrow.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 >
2013-06-09 16:12:50 +02:00
< section data-background = "https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" data-background-repeat = "repeat" data-background-size = "100px" >
2013-06-04 21:29:32 +02:00
< h2 > Repeated Image Backgrounds< / h2 >
< 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 >
2012-03-30 06:13:45 +02:00
< / section >
2013-06-18 14:53:15 +02:00
< section data-transition = "linear" data-background = "#4d7e65" data-background-transition = "slide" >
< h2 > Background Transitions< / h2 >
< p >
Pass reveal.js the < code > backgroundTransition: 'slide'< / code > config argument to make backgrounds slide rather than fade.
< / p >
< / section >
< section data-transition = "linear" data-background = "#8c4738" data-background-transition = "slide" >
< h2 > Background Transition Override< / h2 >
< p >
You can override background transitions per slide by using < code > data-background-transition="slide"< / code > .
< / p >
< / 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 > Pretty Code< / h2 >
2013-04-27 21:50:33 +02:00
< pre > < code data-trim contenteditable >
2012-05-01 14:52:56 +02:00
function linkify( selector ) {
2012-07-10 03:48:43 +02:00
if( supports3DTransforms ) {
2012-10-21 03:14:50 +02:00
2012-07-10 03:48:43 +02:00
var nodes = document.querySelectorAll( selector );
2012-08-13 03:46:06 +02:00
for( var i = 0, len = nodes.length; i < len; i++ ) {
2012-07-10 03:48:43 +02:00
var node = nodes[i];
2013-08-28 15:43:36 +02:00
if( !node.className ) {
2012-07-10 03:48:43 +02:00
node.className += ' roll';
}
2013-08-28 15:43:36 +02:00
}
2012-07-10 03:48:43 +02:00
}
2012-05-01 14:52:56 +02:00
}
2011-12-27 06:29:00 +01:00
< / code > < / pre >
< p > Courtesy of < a href = "http://softwaremaniacs.org/soft/highlight/en/description/" > highlight.js< / a > .< / p >
< / 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 >
2013-10-12 03:54:25 +02:00
< section id = "fragments" >
2012-10-20 19:33:07 +02:00
< h2 > Fragmented Views< / h2 >
< p > Hit the next arrow...< / p >
< p class = "fragment" > ... to step through ...< / p >
< ol >
< li class = "fragment" > < code > any type< / code > < / li >
< li class = "fragment" > < em > of view< / em > < / li >
< li class = "fragment" > < strong > fragments< / strong > < / li >
< / ol >
2012-10-24 14:31:58 +02:00
< aside class = "notes" >
2012-10-25 15:36:25 +02:00
This slide has fragments which are also stepped through in the notes window.
2012-10-24 14:31:58 +02:00
< / aside >
2012-10-20 19:33:07 +02:00
< / section >
< section >
< h2 > Fragment Styles< / h2 >
< p > There's a few styles of fragments, like:< / p >
< 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 highlight-red" > highlight-red< / p >
< p class = "fragment highlight-green" > h ighlight-green< / p >
< p class = "fragment highlight-blue" > highlight-blue< / p >
< / section >
2011-12-27 06:29:00 +01:00
< / section >
2012-10-21 03:14:50 +02:00
2011-12-27 06:29:00 +01:00
< section >
< h2 > Spectacular image!< / h2 >
2012-10-09 06:06:34 +02:00
< a class = "image" href = "http://lab.hakim.se/meny/" target = "_blank" >
< img width = "320" height = "299" src = "http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt = "Meny" >
2011-12-27 06:29:00 +01:00
< / a >
< / 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
2012-10-08 06:08:50 +02:00
< section >
< h2 > Take a Moment< / h2 >
< p >
2012-12-07 19:09:58 +01:00
Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen
2012-10-10 11:11:52 +02:00
during a presentation.
2012-10-08 06:08:50 +02:00
< / p >
< / 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 >
2012-11-10 20:48:29 +01:00
< script src = "js/reveal.min.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
2012-10-10 15:35:13 +02:00
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
2013-01-16 21:49:10 +01:00
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
2013-03-09 01:05:58 +01:00
2013-09-10 21:23:10 +02:00
// Parallax scrolling
2013-09-15 23:45:27 +02:00
// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
// parallaxBackgroundSize: '2100px 900px',
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]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
2012-10-21 02:40:52 +02:00
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
2013-08-08 05:06:41 +02:00
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
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 >
