Applying effect to scrollar mouse

Question

I’ve separated my website by sessions:

<section id="parte1"></section>
<section id="parte2"></section>
<section id="parte3"></section>

And I’d like to apply an effect when I scroll the mouse, like this http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/

My layout is a little different from this plugin demo, because I have no images as is there.

I’d have to put the <section> within the li? As an example of the plugin:

<ul class="grid effect-4" id="grid">
    <li><a href="http://drbl.in/fWMM"><img src="images/1.jpg"></a></li>
    <li><a href="http://drbl.in/fWPV"><img src="images/2.jpg"></a></li>
    <li><a href="http://drbl.in/fWMT"><img src="images/3.jpg"></a></li>
    <li><a href="http://drbl.in/fQdt"><img src="images/4.png"></a></li>
    <!-- ... -->
</ul>