view release on metacpan or  search on metacpan

examples/reveal-default.mkd  view on Meta::CPAN

        <pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
    </section>
</section>

<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>

<section>
    <h2>Clever Quotes</h2>
    <p>
        These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
        &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">
        &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;
    </blockquote>
</section>

<section>
    <h2>Pretty Code</h2>
    <pre><code 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>
    <p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
</section>

<section>
    <h2>Intergalactic Interconnections</h2>
    <p>
        You can link between slides internally,
        <a href="#/2/3">like this</a>.
    </p>
</section>

<section>
    <section id="fragments">
        <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>

        <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 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">highlight-green</p>
        <p class="fragment highlight-blue">highlight-blue</p>
        <p class="fragment current-visible">current-visible</p>
        <p class="fragment highlight-current-blue">highlight-current-blue</p>
    </section>
</section>

<section>
    <h2>Spectacular image!</h2>
    <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">
    </a>
</section>

<section>
    <h2>Export to PDF</h2>
    <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>
    <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>
</section>

<section>
    <h2>Take a Moment</h2>
    <p>
        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
        during a presentation.
    </p>
</section>

<section>
    <h2>Stellar Links</h2>
    <ul>
        <li><a href="http://slid.es">Try the online editor</a></li>
        <li><a href="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li>
        <li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
    </ul>
</section>

<section>
    <h1>THE END</h1>
    <h3>BY Hakim El Hattab / hakim.se</h3>
</section>