index.html 15.4 KB
Newer Older
1
<!doctype html>
Hakim El Hattab's avatar
Hakim El Hattab committed
2
<html lang="en">
3

Hakim El Hattab's avatar
Hakim El Hattab committed
4
5
	<head>
		<meta charset="utf-8">
6

7
		<title>reveal.js – The HTML Presentation Framework</title>
8

9
		<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
10
		<meta name="author" content="Hakim El Hattab">
11

12
13
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
14

15
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
16

17
		<link rel="stylesheet" href="css/reveal.css">
18
		<link rel="stylesheet" href="css/theme/black.css" id="theme">
19

Hakim El Hattab's avatar
Hakim El Hattab committed
20
		<!-- Code syntax highlighting -->
21
		<link rel="stylesheet" href="lib/css/zenburn.css">
hakimel's avatar
hakimel committed
22

Hakim El Hattab's avatar
Hakim El Hattab committed
23
		<!-- Printing and PDF exports -->
24
		<script>
25
26
27
28
29
			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 );
30
31
		</script>

hakimel's avatar
hakimel committed
32
33
34
		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
Hakim El Hattab's avatar
Hakim El Hattab committed
35
	</head>
36

Hakim El Hattab's avatar
Hakim El Hattab committed
37
	<body>
38

39
		<div class="reveal">
40

41
42
43
44
			<!-- 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
typo    
Hakim El Hattab committed
45
					<h3>The HTML Presentation Framework</h3>
46
47
48
					<p>
						<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
					</p>
49
				</section>
50

Hakim El Hattab's avatar
Hakim El Hattab committed
51
				<section>
Hakim El Hattab's avatar
Hakim El Hattab committed
52
					<h2>Hello There</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
53
					<p>
Hakim El Hattab's avatar
Hakim El Hattab committed
54
						reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
55
					</p>
Hakim El Hattab's avatar
Hakim El Hattab committed
56
				</section>
57

58
				<!-- Example of nested vertical slides -->
Hakim El Hattab's avatar
Hakim El Hattab committed
59
				<section>
60
61
					<section>
						<h2>Vertical Slides</h2>
62
63
64
						<p>Slides can be nested inside of each other.</p>
						<p>Use the <em>Space</em> key to navigate through all slides.</p>
						<br>
65
						<a href="#" class="navigate-down">
66
							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
67
68
69
70
						</a>
					</section>
					<section>
						<h2>Basement Level 1</h2>
71
						<p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
72
73
74
75
					</section>
					<section>
						<h2>Basement Level 2</h2>
						<p>That's it, time to go back up.</p>
76
						<br>
77
						<a href="#/2">
78
							<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);">
79
80
						</a>
					</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
81
				</section>
82

Hakim El Hattab's avatar
Hakim El Hattab committed
83
				<section>
Hakim El Hattab's avatar
Hakim El Hattab committed
84
					<h2>Slides</h2>
85
					<p>
Hakim El Hattab's avatar
Hakim El Hattab committed
86
						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>.
87
					</p>
88
89
				</section>

90
				<section>
Hakim El Hattab's avatar
Hakim El Hattab committed
91
					<h2>Point of View</h2>
92
					<p>
Hakim El Hattab's avatar
Hakim El Hattab committed
93
94
95
96
						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.
97
98
99
					</p>
				</section>

100
				<section>
101
					<h2>Touch Optimized</h2>
102
					<p>
103
						Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
104
105
106
					</p>
				</section>

107
				<section data-markdown>
108
109
					<script type="text/template">
						## Markdown support
110

111
112
						Write content using inline or external Markdown.
						Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
113

114
115
116
117
						```
						<section data-markdown>
						  ## Markdown support

118
119
						  Write content using inline or external Markdown.
						  Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
120
121
						</section>
						```
122
					</script>
123
124
				</section>

125
126
127
128
129
				<section>
					<section id="fragments">
						<h2>Fragments</h2>
						<p>Hit the next arrow...</p>
						<p class="fragment">... to step through ...</p>
130
						<p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p>
131
132
133
134
135
136
137

						<aside class="notes">
							This slide has fragments which are also stepped through in the notes window.
						</aside>
					</section>
					<section>
						<h2>Fragment Styles</h2>
138
						<p>There's different types of fragments, like:</p>
139
140
141
						<p class="fragment grow">grow</p>
						<p class="fragment shrink">shrink</p>
						<p class="fragment fade-out">fade-out</p>
142
						<p class="fragment fade-up">fade-up (also down, left and right!)</p>
143
						<p class="fragment current-visible">current-visible</p>
Hakim El Hattab's avatar
Hakim El Hattab committed
144
						<p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p>
145
146
147
					</section>
				</section>

148
				<section id="transitions">
149
150
					<h2>Transition Styles</h2>
					<p>
151
						You can select from different transitions, like: <br>
152
						<a href="?transition=none#/transitions">None</a> -
153
154
						<a href="?transition=fade#/transitions">Fade</a> -
						<a href="?transition=slide#/transitions">Slide</a> -
155
						<a href="?transition=convex#/transitions">Convex</a> -
156
157
						<a href="?transition=concave#/transitions">Concave</a> -
						<a href="?transition=zoom#/transitions">Zoom</a>
158
159
160
					</p>
				</section>

161
				<section id="themes">
162
163
					<h2>Themes</h2>
					<p>
164
						reveal.js comes with a few themes built in: <br>
165
						<!-- 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
166
						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;">Black (default)</a> -
167
168
169
170
171
172
						<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> -
173
						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/blood.css'); return false;">Blood</a> -
174
175
176
						<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>
177
178
179
					</p>
				</section>

180
				<section>
181
					<section data-background="#dddddd">
182
						<h2>Slide Backgrounds</h2>
183
						<p>
184
							Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
185
						</p>
186
						<a href="#" class="navigate-down">
187
							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
188
189
						</a>
					</section>
190
					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
191
						<h2>Image Backgrounds</h2>
192
						<pre><code class="hljs">&lt;section data-background="image.png"&gt;</code></pre>
193
					</section>
194
					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
195
						<h2>Tiled Backgrounds</h2>
196
						<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>
197
					</section>
198
199
200
					<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>
201
							<pre><code class="hljs" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
202
203
						</div>
					</section>
204
205
206
					<section data-background="http://i.giphy.com/90F8aUepslB84.gif">
						<h2>... and GIFs!</h2>
					</section>
207
208
				</section>

209
				<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
210
211
					<h2>Background Transitions</h2>
					<p>
212
						Different background transitions are available via the backgroundTransition option. This one's called "zoom".
213
					</p>
214
					<pre><code class="hljs">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
215
216
				</section>

217
				<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
218
					<h2>Background Transitions</h2>
219
					<p>
220
						You can override background transitions per-slide.
221
					</p>
222
					<pre><code class="hljs" style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
223
224
				</section>

225
226
				<section>
					<h2>Pretty Code</h2>
227
					<pre><code class="hljs" data-trim contenteditable>
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
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
243
					<p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
244
245
				</section>

246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
				<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>
266
					<h2>Tabular Tables</h2>
267
268
269
270
271
272
273
274
275
276
277
278
279
					<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>
Jason Karns's avatar
Jason Karns committed
280
							</tr>
281
282
283
284
							<tr>
								<td>Lemonade</td>
								<td>$2</td>
								<td>18</td>
Jason Karns's avatar
Jason Karns committed
285
							</tr>
286
287
288
289
							<tr>
								<td>Bread</td>
								<td>$3</td>
								<td>2</td>
Jason Karns's avatar
Jason Karns committed
290
							</tr>
291
292
293
294
						</tbody>
					</table>
				</section>

295
296
297
298
				<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
299
						&ldquo;The nice thing about standards is that there are so many to choose from&rdquo;</q> and block:
300
301
					</p>
					<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
Hakim El Hattab's avatar
Hakim El Hattab committed
302
303
						&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;
304
305
					</blockquote>
				</section>
306

307
308
309
				<section>
					<h2>Intergalactic Interconnections</h2>
					<p>
310
						You can link between slides internally,
311
312
313
						<a href="#/2/3">like this</a>.
					</p>
				</section>
314

315
				<section>
316
317
318
319
320
321
322
					<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>
323
				</section>
324

325
326
				<section>
					<h2>Export to PDF</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
327
					<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
328
					<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>
329
				</section>
330

331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
				<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>

352
353
354
				<section>
					<h2>Take a Moment</h2>
					<p>
355
						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.
356
357
358
					</p>
				</section>

359
360
361
362
				<section>
					<h2>Much more</h2>
					<ul>
						<li>Right-to-left support</li>
Hakim El Hattab's avatar
Hakim El Hattab committed
363
						<li><a href="https://github.com/hakimel/reveal.js#api">Extensive JavaScript API</a></li>
364
365
						<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
366
						<li><a href="https://github.com/hakimel/reveal.js#keyboard-bindings">Custom keyboard bindings</a></li>
367
368
369
					</ul>
				</section>

Hakim El Hattab's avatar
Hakim El Hattab committed
370
				<section style="text-align: left;">
371
					<h1>THE END</h1>
Hakim El Hattab's avatar
Hakim El Hattab committed
372
373
374
375
					<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>
376
				</section>
377

378
			</div>
379

Hakim El Hattab's avatar
Hakim El Hattab committed
380
		</div>
381

382
		<script src="lib/js/head.min.js"></script>
383
		<script src="js/reveal.js"></script>
384

385
		<script>
386

Hakim El Hattab's avatar
Hakim El Hattab committed
387
			// Full list of configuration options available at:
388
389
390
391
392
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
393
				center: true,
394

395
				transition: 'slide', // none/fade/slide/convex/concave/zoom
396

Hakim El Hattab's avatar
Hakim El Hattab committed
397
				// Optional reveal.js plugins
398
399
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
400
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
401
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
402
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
403
404
					{ src: 'plugin/zoom-js/zoom.js', async: true },
					{ src: 'plugin/notes/notes.js', async: true }
405
406
				]
			});
407

408
		</script>
409

Hakim El Hattab's avatar
Hakim El Hattab committed
410
	</body>
411
</html>