yvierkoetter
d62e71bafb
- Hero glass panel now shows Lina · rings · Marlin from vase artwork (side-by-side on landscape, stacked on portrait) - Vase illustration used as ornamental divider above album grid - Vase date used as footer closing line - Homepage structure: intro text, ornament, albums divider, gallery, date 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.25) + 'px)';
|
|
if (heroFg) heroFg.style.transform = 'translateY(' + (s * 0.15) + '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;
|
|
});
|
|
})();
|