Live demo
scrollToClip
A function to clip two elements on scroll to give a reveal effect
Compatability
MOBILE | ||||
---|---|---|---|---|
✔ | ✔ | x | ✔ | ✔ |
Usage
HTML
<img class="scrollToClip" src="[image_color1]"/> <img class="scrollToClip reverse" src="[image_color2]"/>
CSS
.scrollToClip{ position: fixed; z-index: 10; /*positioning*/ } .scrollToClip.reverse{ z-index: 9; }
Javascript
//elem1(object) : The element that will display before being clipped. //elem2(object) : The element that will display after being clipped. //background(object) : The element that will serve as a basis for the clipping. scrollToClip(elem1,elem2,background);