1234567891011121314151617181920212223242526272829303132333435363738394041 |
- // Detect request animation frame
- var scroll =
- window.requestAnimationFrame ||
- // IE Fallback
- function (callback) {
- window.setTimeout(callback, 1000 / 60);
- };
- var elementsToShow = document.querySelectorAll(".show-on-scroll");
- function loop() {
- Array.prototype.forEach.call(elementsToShow, function (element) {
- if (isElementInViewport(element)) {
- element.classList.add("is-visible");
- } else {
- element.classList.remove("is-visible");
- }
- });
- scroll(loop);
- }
- // Call the loop for the first time
- loop();
- function isElementInViewport(el) {
- // special bonus for those using jQuery
- if (typeof jQuery === "function" && el instanceof jQuery) {
- el = el[0];
- }
- var rect = el.getBoundingClientRect();
- return (
- (rect.top <= 0 && rect.bottom >= 0) ||
- (rect.bottom >=
- (window.innerHeight || document.documentElement.clientHeight) &&
- rect.top <=
- (window.innerHeight || document.documentElement.clientHeight)) ||
- (rect.top >= 0 &&
- rect.bottom <=
- (window.innerHeight || document.documentElement.clientHeight))
- );
- }
|