Clip Elements On Scroll – scrollToClip

Category: Animation , Javascript | September 20, 2017
Author:bersLucas
Views Total:283 views
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);

You Might Be Interested In:


Leave a Reply