yvierkoetter
38 lines
1.1 KiB
JavaScript
38 lines
1.1 KiB
JavaScript
(function () {
|
|
var hero = document.querySelector('.hero');
|
|
if (!hero) return;
|
|
|
|
var heroBg = hero.querySelector('.hero-bg');
|
|
var heroFg = hero.querySelector('.hero-fg');
|
|
var heroScroll = hero.querySelector('.hero-scroll');
|
|
var heroH = hero.offsetHeight;
|
|
var ticking = false;
|
|
|
|
function update() {
|
|
var s = window.scrollY;
|
|
if (s > heroH) { ticking = false; return; }
|
|
|
|
// Background at 55%, text at 80% — both slower than normal, image slowest
|
|
if (heroBg) heroBg.style.transform = 'translateY(' + (s * 0.25) + 'px)';
|
|
if (heroFg) heroFg.style.transform = 'translateY(' + (s * 0.05) + 'px)';
|
|
|
|
// Scroll arrow fades out over the first 30% of hero height
|
|
if (heroScroll) {
|
|
heroScroll.style.opacity = Math.max(0, 1 - s / (heroH * 0.3)).toFixed(3);
|
|
}
|
|
|
|
ticking = false;
|
|
}
|
|
|
|
window.addEventListener('scroll', function () {
|
|
if (!ticking) {
|
|
requestAnimationFrame(update);
|
|
ticking = true;
|
|
}
|
|
}, { passive: true });
|
|
|
|
window.addEventListener('resize', function () {
|
|
heroH = hero.offsetHeight;
|
|
});
|
|
})();
|