(function(){ function isElementInViewport(element) { var rect = element.getBoundingClientRect(); if ( rect.top >= 0 && rect.left+rect.width/2 >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + (element.offsetHeight * 0.75) && rect.right-rect.width/2 <= (window.innerWidth || document.documentElement.clientWidth)) { return 1; } else if ( rect.left+rect.width/2 >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right-rect.width/2 <= (window.innerWidth || document.documentElement.clientWidth)) { return 2; } return false; } function getAnimatedElements() { var animatedWrapper = document.querySelectorAll(".is-animated"), elements = []; for (var i = 0; i < animatedWrapper.length; i++) { var hasChildren = false; if (animatedWrapper[i].classList.contains("rs-columns") || animatedWrapper[i].classList.contains("animate-children")) { for (var j = 0; j < animatedWrapper[i].children.length; j++) { elements.push(animatedWrapper[i].children[j]); } } else if (!animatedWrapper[i].classList.contains("rs-columns")) { for (var j = 0; j < animatedWrapper[i].children.length; j++) { if (animatedWrapper[i].children[j].classList.contains("rs-columns")) { for (var k = 0; k < animatedWrapper[i].children[j].children.length; k++) { elements.push(animatedWrapper[i].children[j].children[k]); hasChildren = true; } } } if (!hasChildren) { elements.push(animatedWrapper[i]); } } } return elements; } var elements = getAnimatedElements(); function callbackFunc() { var delay = 0; for (var i = 0; i < elements.length; i++) { if (elements[i].classList.contains('-in-view') === false && (hasDelay = isElementInViewport(elements[i]))) { if (hasDelay === 1) { elements[i].style.transitionDelay = delay + 'ms'; delay = delay + 125; } elements[i].classList.add("-in-view"); } /* Else-Bedinung entfernen, um .visible nicht wieder zu löschen, wenn das Element den Viewport verlässt. */ else if (Element.prototype.closest && elements[i].classList.contains('-in-view') === true && !isElementInViewport(elements[i]) && (elements[i].classList.contains('-reverse') || elements[i].closest('.is-animated').classList.contains('-reverse'))) { elements[i].classList.remove("-in-view"); } } } window.addEventListener("load", callbackFunc); window.addEventListener("scroll", callbackFunc); })();