|
@ -28,11 +28,10 @@ |
|
|
<div class="slides"> |
|
|
<div class="slides"> |
|
|
<section> |
|
|
<section> |
|
|
<h1>Reveal.js</h1> |
|
|
<h1>Reveal.js</h1> |
|
|
<h3 class="inverted">A CSS 3D Slideshow</h3> |
|
|
<h3 class="inverted">CSS 3D Presentations</h3> |
|
|
<script> |
|
|
<script> |
|
|
// Delicously hacky. Look away. |
|
|
// Delicously hacky. Look away. |
|
|
if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) ) |
|
|
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>' ); |
|
|
document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' ); |
|
|
|
|
|
</script> |
|
|
</script> |
|
|
</section> |
|
|
</section> |
|
|
|
|
|
|
|
@ -95,6 +94,7 @@ |
|
|
<li><a href="http://lab.hakim.se/reveal-js/?transition=cube">Cube</a></li> |
|
|
<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=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=concave">Concave</a></li> |
|
|
|
|
|
<li><a href="http://lab.hakim.se/reveal-js/?transition=linear">Linear</a></li> |
|
|
</ul> |
|
|
</ul> |
|
|
</section> |
|
|
</section> |
|
|
|
|
|
|
|
@ -148,11 +148,10 @@ |
|
|
<p> |
|
|
<p> |
|
|
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name. |
|
|
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name. |
|
|
</p> |
|
|
</p> |
|
|
<p><code style="font-size: 27px;"> |
|
|
<pre><code contenteditable style="font-size: 18px; margin-top: 20px;">document.addEventListener( 'customevent', function() { |
|
|
document.addEventListener('customevent', function(){<br /> |
|
|
alert( '"customevent" has fired' ); |
|
|
alert('event has fired');<br /> |
|
|
} ); |
|
|
}); |
|
|
</code></pre> |
|
|
</code></p> |
|
|
|
|
|
</section> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<section> |
|
@ -170,27 +169,27 @@ |
|
|
<section> |
|
|
<section> |
|
|
<h2>Pretty Code</h2> |
|
|
<h2>Pretty Code</h2> |
|
|
<pre><code contenteditable> |
|
|
<pre><code contenteditable> |
|
|
var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined || |
|
|
var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined || |
|
|
document.body.style['MozPerspective'] !== undefined || |
|
|
document.body.style['MozPerspective'] !== undefined || |
|
|
document.body.style['perspective'] !== undefined; |
|
|
document.body.style['perspective'] !== undefined; |
|
|
|
|
|
|
|
|
function linkify( selector ) { |
|
|
function linkify( selector ) { |
|
|
if( supports3DTransforms ) { |
|
|
if( supports3DTransforms ) { |
|
|
|
|
|
|
|
|
var nodes = document.querySelectorAll( selector ); |
|
|
var nodes = document.querySelectorAll( selector ); |
|
|
|
|
|
|
|
|
for( var i = 0, len = nodes.length; i < len; i++ ) { |
|
|
for( var i = 0, len = nodes.length; i < len; i++ ) { |
|
|
var node = nodes[i]; |
|
|
var node = nodes[i]; |
|
|
|
|
|
|
|
|
if( !node.className || !node.className.match( /roll/g ) ) { |
|
|
if( !node.className || !node.className.match( /roll/g ) ) { |
|
|
node.className += ' roll'; |
|
|
node.className += ' roll'; |
|
|
node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>'; |
|
|
node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>'; |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
linkify( 'a' ); |
|
|
linkify( 'a' ); |
|
|
</code></pre> |
|
|
</code></pre> |
|
|
<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p> |
|
|
<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p> |
|
|
</section> |
|
|
</section> |
|
@ -262,9 +261,9 @@ |
|
|
query[ a.split( '=' ).shift() ] = a.split( '=' ).pop(); |
|
|
query[ a.split( '=' ).shift() ] = a.split( '=' ).pop(); |
|
|
} ); |
|
|
} ); |
|
|
|
|
|
|
|
|
document.addEventListener('customevent', function(){ |
|
|
document.addEventListener( 'customevent', function() { |
|
|
alert('event has fired'); |
|
|
alert( '"customevent" has fired' ); |
|
|
}); |
|
|
} ); |
|
|
|
|
|
|
|
|
Reveal.initialize({ |
|
|
Reveal.initialize({ |
|
|
// Display controls in the bottom right corner |
|
|
// Display controls in the bottom right corner |
|
|