<head>
<meta charset="utf-8">
- <title>reveal.js</title>
+ <title>reveal.js - HTML5 Presentations</title>
<meta name="description" content="An easy to use CSS 3D slideshow tool for quickly creating good looking HTML presentations.">
<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" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
+ <link rel="stylesheet" href="css/print.css" type="text/css" media="print">
- <link rel="stylesheet" href="lib/zenburn.css">
+ <link rel="stylesheet" href="lib/highlight/zenburn.css">
</head>
<body>
- <div id="reveal">
+ <div class="reveal">
<!-- Used to fade in a background when a specific slide state is reached -->
<div class="state-background"></div>
<div class="slides">
<section>
<h1>Reveal.js</h1>
- <h3 class="inverted">A CSS 3D Slideshow</h3>
+ <h3 class="inverted">CSS 3D Presentations</h3>
<script>
// Delicously hacky. Look away.
- if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) )
- document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' );
+ if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) ) document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' );
</script>
</section>
<p>
<i><small>- <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small></i>
</p>
+
+ <aside class="notes">
+ Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you run the speaker notes server.
+ </aside>
</section>
<!-- Example of nested vertical slides -->
</p>
</section>
+ <section>
+ <h2>Works in Mobile Safari</h2>
+ <p>
+ Try it out! You can swipe through the slides pinch your way to the overview.
+ </p>
+ </section>
+
<section>
<h2>Transition Styles</h2>
<p>
<li><a href="http://lab.hakim.se/reveal-js/?transition=cube">Cube</a></li>
<li><a href="http://lab.hakim.se/reveal-js/?transition=page">Page</a></li>
<li><a href="http://lab.hakim.se/reveal-js/?transition=concave">Concave</a></li>
+ <li><a href="http://lab.hakim.se/reveal-js/?transition=linear">Linear</a></li>
</ul>
</section>
</section>
</section>
+ <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 contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() {
+ alert( '"customevent" has fired' );
+} );
+ </code></pre>
+ </section>
+
<section>
<h2>Clever Quotes</h2>
<p>
<section>
<h2>Pretty Code</h2>
<pre><code contenteditable>
- var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined ||
- document.body.style['MozPerspective'] !== undefined ||
- document.body.style['perspective'] !== undefined;
-
- 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.match( /roll/g ) ) {
- node.className += ' roll';
- node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
- }
- };
- }
- }
-
- linkify( 'a' );
+var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined ||
+ document.body.style['MozPerspective'] !== undefined ||
+ document.body.style['perspective'] !== undefined;
+
+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.match( /roll/g ) ) {
+ node.className += ' roll';
+ node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
+ }
+ };
+ }
+}
+
+linkify( 'a' );
</code></pre>
<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
</section>
<div class="progress"><span></span></div>
</div>
-
- <script src="js/reveal.js"></script>
<!-- Optional libraries for code syntax highlighting and classList support in IE9 -->
- <script src="lib/highlight.js"></script>
- <script src="lib/classList.js"></script>
-
+ <script src="lib/head/head.min.js"></script>
+
<script>
- // Parse the query string into a key/value object
- var query = {};
- location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
- query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
- } );
+ // Load the main reveal.js script
+ head.js( 'js/reveal.js', function() {
+ // Parse the query string into a key/value object
+ var query = {};
- Reveal.initialize({
- // Display controls in the bottom right corner
- controls: true,
+ location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
+ query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
+ } );
- // Display a presentation progress bar
- progress: true,
+ // Fires when a slide with data-state=customevent is activated
+ Reveal.addEventListener( 'customevent', function() {
+ alert( '"customevent" has fired' );
+ } );
- // If true; each slide will be pushed to the browser history
- history: true,
+ // Fires each time a new slide is activated
+ Reveal.addEventListener( 'slidechanged', function( event ) {
+ // event.previousSlide, event.currentSlide, event.indexh, event.indexv
+ } );
- // Flags if mouse wheel navigation should be enabled
- mouseWheel: true,
+ Reveal.initialize({
+ // Display controls in the bottom right corner
+ controls: true,
- // Apply a 3D roll to links on hover
- rollingLinks: true,
+ // Display a presentation progress bar
+ progress: true,
- // UI style
- theme: query.theme || 'default', // default/neon
+ // If true; each slide will be pushed to the browser history
+ history: true,
- // Transition style
- transition: query.transition || 'default' // default/cube/page/concave/linear(2d)
- });
+ // Loops the presentation, defaults to false
+ loop: false,
- hljs.initHighlightingOnLoad();
- </script>
+ // Flags if mouse wheel navigation should be enabled
+ mouseWheel: true,
+
+ // Apply a 3D roll to links on hover
+ rollingLinks: true,
+ // UI style
+ theme: query.theme || 'default', // default/neon
+
+ // Transition style
+ transition: query.transition || 'default' // default/cube/page/concave/linear(2d)
+ });
+ } );
+
+ // Load third party scripts
+ head.js( 'lib/highlight/highlight.js', 'lib/polyfills/classList.js', function() {
+ // Fire off syntax highlighting for potential code samples in the slides
+ hljs.initHighlightingOnLoad();
+ } );
+
+ // If we're runnning the notes server we need to include some additional JS
+ if( window.location.host === 'localhost:1947' ) {
+ head.js( 'socket.io/socket.io.js', 'lib/slidenotes/client.js' );
+ }
+ </script>
+
</body>
</html>
\ No newline at end of file
projects / reveal.js.git / blobdiff