Created
October 15, 2021 17:55
-
-
Save javimata/967314886ccf4ca5c12f876bfdb28bba to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Check if elements are visible in the current viewport | |
* If is visible add a class in-view else remove | |
*/ | |
function isElementInViewport(el) { | |
var rect = el.getBoundingClientRect(); | |
return ( | |
rect.top >= 0 && | |
rect.left >= 0 && | |
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && | |
rect.right <= (window.innerWidth || document.documentElement.clientWidth) | |
); | |
} | |
function callbackFunc() { | |
for (var i = 0; i < items.length; i++) { | |
if (isElementInViewport(items[i])) { | |
items[i].classList.add("in-view"); | |
} else { | |
items[i].classList.remove("in-view"); | |
} | |
} | |
} | |
// listen for events | |
window.addEventListener("load", callbackFunc); | |
window.addEventListener("resize", callbackFunc); | |
window.addEventListener("scroll", callbackFunc); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment