yvierkoetter
921a852cbf
- Hero text panel moved to bottom with frosted glass effect (blur 5px, dark semi-transparent background, hairline top border) - Scroll arrow centered inside glass panel at the bottom - Three-layer parallax: image 55%, text 65%, page 100% - Zeremonie album date fixed (was future-dated, now visible) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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.45) + 'px)';
|
|
if (heroFg) heroFg.style.transform = 'translateY(' + (s * 0.35) + '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;
|
|
});
|
|
})();
|