Clip Elements On Scroll – scrollToClip

Category: Animation , Javascript | September 20, 2017
Author: bersLucas
Views Total: 167
Official Page: Go to website
Last Update: September 20, 2017
License: MIT

Preview:

Clip Elements On Scroll – scrollToClip

Description:

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);