view release on metacpan or  search on metacpan

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

            * Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <code>&lt;head&gt;</code> using a <code>&lt;link&gt;</code>.
        </small>
    </p>
</section>

<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 background.
    </p>
</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 data-trim contenteditable style="font-size: 18px; margin-top: 20px;">
Reveal.addEventListener( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
    </code></pre>
</section>

<section>
    <section data-background="#007777">
        <h2>Slide Backgrounds</h2>
        <p>
            Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported.
        </p>
        <a href="#" class="image navigate-down">
            <img width="178" height="238" 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/arrow.png">
        <h2>Image Backgrounds</h2>
        <pre><code>&lt;section data-background="image.png"&gt;</code></pre>
    </section>
    <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" data-background-repeat="repeat" data-background-size="100px">
        <h2>Repeated Image Backgrounds</h2>
        <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">