Add A Peeling Effect To Your Webpage With Peeler.js

Peeler.js is a standalone javascript library for presenting your content with a peeling effect when your users scroll down the page, a bit similar to the vertical parallax scrolling effect.

How to use it:

1. Include peeler.css in the head section of your page.

<link href="css/peeler.css" rel="stylesheet">

2. Include peeler.js at the bottom of your page to save the page load time

<script type="text/javascript" src="js/peeler.js"></script> 

3. Markup html structure.

<article>
<p> Section 1 </p>
<img class="background" src="1.jpg"/>
</article>

<article>
<p> Section 2 </p>
<img class="background" src="2.jpg"/>
</article>

<article>
<p> Section 3 </p>
<img class="background" src="3.jpg"/>
</article>

...

4. The javascript. 

<script type="text/javascript">
var peeler = new Peeler();
peeler.bind();
</script>

5. By default, Peeler.js will make your article elements peelable. You can customize the selector in peeler.js

articles = document.querySelectorAll("article"),
backgroundImages = document.querySelectorAll(".background"),

---

This awesome jQuery plugin is developed by mduvall. For more Advanced Usages, please check the demo page or visit the official website.