Clip Elements On Scroll – scrollToClip

scrollToClip is a minimal JavaScript library to clip two overlapping elements when scrolling down the page. Works on modern browsers which support SVG clip property.

How to use it:

Insert the minified version of the scrollToClip library into the html document.

<script src="scrollToClip_min.js"></script>

Add two element to clip on scroll.

<img class="scrollToClip" src="before-scroll.jpg">
<img class="scrollToClip reverse" src="after-scroll.jpg">

Usage.

// scrollToClip(elem1,elem2,background);
var elem1 = document.querySelectorAll(".scrollToClip")[1];
var elem2 = document.querySelectorAll(".scrollToClip")[0];
var background = document.querySelector("#element");
scrollToClip(elem1,elem2,background);