Skip to content
Snippets Groups Projects
index.html 15.4 KiB
Newer Older
<!doctype html>
Hakim El Hattab's avatar
Hakim El Hattab committed
<html lang="en">
Hakim El Hattab's avatar
Hakim El Hattab committed
	<head>
		<meta charset="utf-8">
		<title>reveal.js – The HTML Presentation Framework</title>
		<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
		<meta name="author" content="Hakim El Hattab">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/black.css" id="theme">
Hakim El Hattab's avatar
Hakim El Hattab committed
		<!-- Code syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">
hakimel's avatar
hakimel committed

Hakim El Hattab's avatar
Hakim El Hattab committed
		<!-- Printing and PDF exports -->
			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 );
hakimel's avatar
hakimel committed
		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
Hakim El Hattab's avatar
Hakim El Hattab committed
	</head>
Hakim El Hattab's avatar
Hakim El Hattab committed
	<body>
		<div class="reveal">
			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
					<h1>Reveal.js</h1>
Hakim El Hattab's avatar
Hakim El Hattab committed
					<h3>The HTML Presentation Framework</h3>
					<p>
						<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
					</p>
Hakim El Hattab's avatar
Hakim El Hattab committed
				<section>
Hakim El Hattab's avatar
Hakim El Hattab committed
					<h2>Hello There</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
					<p>
Hakim El Hattab's avatar
Hakim El Hattab committed
						reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
Hakim El Hattab's avatar
Hakim El Hattab committed
				</section>
				<!-- Example of nested vertical slides -->
Hakim El Hattab's avatar
Hakim El Hattab committed
				<section>
					<section>
						<h2>Vertical Slides</h2>
						<p>Slides can be nested inside of each other.</p>
						<p>Use the <em>Space</em> key to navigate through all slides.</p>
						<br>
						<a href="#" class="navigate-down">
							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
						</a>
					</section>
					<section>
						<h2>Basement Level 1</h2>
						<p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
					</section>
					<section>
						<h2>Basement Level 2</h2>
						<p>That's it, time to go back up.</p>
						<a href="#/2">
							<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);">
Hakim El Hattab's avatar
Hakim El Hattab committed
				</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
				<section>
Hakim El Hattab's avatar
Hakim El Hattab committed
					<h2>Slides</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
						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>.
Hakim El Hattab's avatar
Hakim El Hattab committed
					<h2>Point of View</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
						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.
					<h2>Touch Optimized</h2>
						Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
				<section data-markdown>
					<script type="text/template">
						## Markdown support
						Write content using inline or external Markdown.
						Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
						```
						<section data-markdown>
						  ## Markdown support

						  Write content using inline or external Markdown.
						  Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
				<section>
					<section id="fragments">
						<h2>Fragments</h2>
						<p>Hit the next arrow...</p>
						<p class="fragment">... to step through ...</p>
						<p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p>

						<aside class="notes">
							This slide has fragments which are also stepped through in the notes window.
						</aside>
					</section>
					<section>
						<h2>Fragment Styles</h2>
						<p>There's different types of fragments, like:</p>
						<p class="fragment grow">grow</p>
						<p class="fragment shrink">shrink</p>
						<p class="fragment fade-out">fade-out</p>
						<p class="fragment current-visible">current-visible</p>
						<p class="fragment highlight-red">highlight-red</p>
						<p class="fragment highlight-blue">highlight-blue</p>
					</section>
				</section>

				<section id="transitions">
					<h2>Transition Styles</h2>
					<p>
						You can select from different transitions, like: <br>
						<a href="?transition=none#/transitions">None</a> -
						<a href="?transition=fade#/transitions">Fade</a> -
						<a href="?transition=slide#/transitions">Slide</a> -
						<a href="?transition=convex#/transitions">Convex</a> -
						<a href="?transition=concave#/transitions">Concave</a> -
						<a href="?transition=zoom#/transitions">Zoom</a>
				<section id="themes">
						reveal.js comes with a few themes built in: <br>
						<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
Hakim El Hattab's avatar
Hakim El Hattab committed
						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;">Black (default)</a> -
						<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> -
						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/blood.css'); return false;">Blood</a> -
						<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>
					<section data-background="#dddddd">
						<h2>Slide Backgrounds</h2>
							Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
						<a href="#" class="navigate-down">
							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
						</a>
					</section>
					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
						<h2>Image Backgrounds</h2>
						<pre><code class="hljs">&lt;section data-background="image.png"&gt;</code></pre>
					</section>
					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
						<h2>Tiled Backgrounds</h2>
						<pre><code class="hljs" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
					</section>
					<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 class="hljs" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
					<section data-background="http://i.giphy.com/90F8aUepslB84.gif">
						<h2>... and GIFs!</h2>
					</section>
				<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
					<h2>Background Transitions</h2>
					<p>
						Different background transitions are available via the backgroundTransition option. This one's called "zoom".
					<pre><code class="hljs">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
				<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
					<h2>Background Transitions</h2>
						You can override background transitions per-slide.
					<pre><code class="hljs" style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
					<pre><code class="hljs" data-trim contenteditable>
function linkify( selector ) {
  if( supports3DTransforms ) {

    var nodes = document.querySelectorAll( selector );

    for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
      var node = nodes[i];

      if( !node.className ) {
        node.className += ' roll';
      }
    }
  }
}
					</code></pre>
Hakim El Hattab's avatar
Hakim El Hattab committed
					<p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
				<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>
					<h2>Tabular Tables</h2>
					<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>
								<td>Lemonade</td>
								<td>$2</td>
								<td>18</td>
							<tr>
								<td>Bread</td>
								<td>$3</td>
								<td>2</td>
						</tbody>
					</table>
				</section>

				<section>
					<h2>Clever Quotes</h2>
					<p>
						These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
Hakim El Hattab's avatar
Hakim El Hattab committed
						&ldquo;The nice thing about standards is that there are so many to choose from&rdquo;</q> and block:
					</p>
					<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
Hakim El Hattab's avatar
Hakim El Hattab committed
						&ldquo;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.&rdquo;
				<section>
					<h2>Intergalactic Interconnections</h2>
					<p>
						You can link between slides internally,
						<a href="#/2/3">like this</a>.
					</p>
				</section>
					<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>
Hakim El Hattab's avatar
Hakim El Hattab committed
					<p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, here's an example:</p>
Daniele Pala's avatar
Daniele Pala committed
					<iframe src="https://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>
				<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>

						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.
				<section>
					<h2>Much more</h2>
					<ul>
						<li>Right-to-left support</li>
Hakim El Hattab's avatar
Hakim El Hattab committed
						<li><a href="https://github.com/hakimel/reveal.js#api">Extensive JavaScript API</a></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>
Hakim El Hattab's avatar
Hakim El Hattab committed
						<li><a href="https://github.com/hakimel/reveal.js#keyboard-bindings">Custom keyboard bindings</a></li>
Hakim El Hattab's avatar
Hakim El Hattab committed
				<section style="text-align: left;">
Hakim El Hattab's avatar
Hakim El Hattab committed
					<p>
						- <a href="http://slides.com">Try the online editor</a> <br>
						- <a href="https://github.com/hakimel/reveal.js">Source code &amp; documentation</a>
					</p>
Hakim El Hattab's avatar
Hakim El Hattab committed
		</div>
		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.js"></script>
Hakim El Hattab's avatar
Hakim El Hattab committed
			// Full list of configuration options available at:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				transition: 'slide', // none/fade/slide/convex/concave/zoom
Hakim El Hattab's avatar
Hakim El Hattab committed
				// Optional reveal.js plugins
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true },
					{ src: 'plugin/notes/notes.js', async: true }
Hakim El Hattab's avatar
Hakim El Hattab committed
	</body>