Hallo zusammen,
brauche mal wieder bisschen Hilfe mit JS.
Ich habe mehrere Elemente mit der Klasse .skill und würde diese gerne animieren, wenn sie im Viewport sind bzw. wenn man dorthin scrollt, sodass sie im Viewport sind.
Dafür habe ich bisher folgenden Code geschrieben:
JavaScript
var elements = document.querySelectorAll('.skill');
elements.forEach( function (element) {
document.addEventListener('scroll', animate(element, element.clientHeight))
} );
function inView(element, elementHeight) {
var windowHeight = window.innerHeight;
var scrollY = window.scrollY || window.pageYOffset;
var scrollPosition = scrollY + windowHeight;
var elementPosition = element.getBoundingClientRect().top + scrollY + elementHeight;
if (scrollPosition > elementPosition) {
return true;
}
return false;
}
function animate(element, elementHeight) {
if (inView(element, elementHeight)) {
element.classList.add('animate');
}
}
Alles anzeigen
Das Problem dabei ist, dass nur am Anfang einmal abgefragt wird, ob die Elemente im Viewport sind und nur dann die Klasse hinzugefügt wird.
Wenn ich allerdings scrolle, sodass diese irgendwann in den Viewport gelangen, passiert nichts.
Verstehe nicht ganz, warum das so ist.
Wäre super, wenn jemand mir helfen könnte bzw. das erklären würde.
Schon mal vielen Dank!
Gruß
JR Cologne
PS: Ich würde gerne auf jQuery-Lösungen verzichten.