Incrementals

Example:

<ul class="incremental auto" data-incremental-delay="200">
    <li> item 1 </li>
    <li> item 2 </li>
    <li>
        <ul class="incremental auto">
            <li> item 3 </li>
            <li> item 4 </li>
        </ul>
    </li>
</ul>

  • item 1
  • item 2
    • item 3
    • item 4
  • CSS class 'incremental' on element ⇒ children progression
  • CSS class 'auto' ⇒ automatic reveal
  • Attribute 'data-incremental-delay' ⇒ time offset (500ms default)
NO-MARKDOWN <div class="boxed" style="margin-bottom: 1em;"> <h3>Example:</h3> <p class="code" style="font-size: 0.8em;"> &lt;ul class="<span class="code pale-blue">incremental</span> <span class="code pale-red">auto</span>" <span class="code pale-green">data-incremental-delay</span>="200"&gt; <br> <span class="auto incremental" data-incremental-delay="200"> <span style="font-weight: 900" class="code pale-grey">&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt; <strong>item 1</strong> &lt;/li&gt;<br></span> <span style="font-weight: 900" class="code pale-grey">&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt; <strong>item 2</strong> &lt;/li&gt;<br></span> <span> <span class="code">&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class="<span class="code pale-blue">incremental</span> <span class="code pale-red">auto</span>"&gt;<br></span> <span class="auto incremental" data-incremental-delay="400"> <span style="font-weight: 900" class="code pale-grey">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt; <strong>item 3</strong> &lt;/li&gt;<br></span> <span style="font-weight: 900" class="code pale-grey">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt; <strong>item 4</strong> &lt;/li&gt;<br></span> </span> <span class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;<br></span> </span> </span> &lt;/ul&gt; </p> </div> <div style="font-size: 1em; width: 9em; float: right; padding-top: 1em; padding-bottom: 1em; margin-top: -10em; margin-right: 3em; background-color: #666666; color: white; border: 4px solid #333333;"> <ul class="incremental auto" data-incremental-delay="200"> <li> item 1 </li> <li> item 2 </li> <li class="listMid"> <ul class="incremental auto"> <li> item 3 </li> <li> item 4 </li> </ul> </li> </ul> </div> <ul class="auto incremental" data-incremental-delay="200"> <li> CSS class '<span class="code pale-blue">incremental</span>' on element &#8658; children progression </li> <li> CSS class '<span class="code pale-red">auto</span>' &#8658; automatic reveal </li> <li> Attribute '<span class="code pale-green">data-incremental-delay</span>' &#8658; time offset <span class="fade">(500ms default)</span> </li> </ul>