document.addEventListener('DOMContentLoaded', function () {
const sections = document.querySelectorAll('.scroll-bereich');
function moveImages() {
sections.forEach(function (section) {
const image = section.querySelector('.scroll-bild');
if (!image) {
return;
}
const sectionRect = section.getBoundingClientRect();
const sectionHeight = section.offsetHeight;
const imageHeight = image.offsetHeight;
const viewportHeight = window.innerHeight;
const maxMove = Math.max(0, sectionHeight - imageHeight);
/*
* Start:
* Section erreicht den oberen Bildschirmrand
*
* Ende:
* Section erreicht mit ihrem unteren Ende
* den unteren Bildschirmrand
*/
const scrollDistance = Math.max(
1,
sectionHeight - viewportHeight
);
let progress = -sectionRect.top / scrollDistance;
progress = Math.max(0, Math.min(1, progress));
const move = maxMove * progress;
image.style.transform =
'translate3d(0, ' + move + 'px, 0)';
});
}
window.addEventListener('scroll', moveImages, {
passive: true
});
window.addEventListener('resize', moveImages);
moveImages();
});
