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;"> <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"> <br> <span class="auto incremental" data-incremental-delay="200"> <span style="font-weight: 900" class="code pale-grey">    <li> <strong>item 1</strong> </li><br></span> <span style="font-weight: 900" class="code pale-grey">    <li> <strong>item 2</strong> </li><br></span> <span> <span class="code">    <li><br/>        <ul class="<span class="code pale-blue">incremental</span> <span class="code pale-red">auto</span>"><br></span> <span class="auto incremental" data-incremental-delay="400"> <span style="font-weight: 900" class="code pale-grey">            <li> <strong>item 3</strong> </li><br></span> <span style="font-weight: 900" class="code pale-grey">            <li> <strong>item 4</strong> </li><br></span> </span> <span class="code">        </ul><br/>    </li><br></span> </span> </span> </ul> </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 ⇒ children progression </li> <li> CSS class '<span class="code pale-red">auto</span>' ⇒ automatic reveal </li> <li> Attribute '<span class="code pale-green">data-incremental-delay</span>' ⇒ time offset <span class="fade">(500ms default)</span> </li> </ul>

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>