m038/intotheeast-com-content
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(story): smooth hero overlay fade-out and add scrolly caption background

Browse Source 
Overlay previously hard-hid with display:none when scrollY = 100vh, while
the title was still visible (it exits at ~115vh). Now fades in 0→0.65 over
the first 70vh then fades back out to 0 by 140vh (full hero height).

Scrolly caption changed from full-width to centered pill with
rgba(0,0,0,0.45) background — readable against any image regardless of tone.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
This commit is contained in:
Mischa
2026-06-20 10:32:22 +02:00
parent 7dcaa703e0
commit 49c4ab0341
2 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/templates/story.html.twig
+9 -4
View File
@@ -63,10 +63,15 @@
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
function update() {
var progress = Math.min(window.scrollY / window.innerHeight, 1);
overlay.style.background = 'rgba(0,0,0,' + (progress * 0.65).toFixed(3) + ')';
if (progress >= 1) overlay.style.display = 'none';
else overlay.style.display = '';
var scrollY = window.scrollY;
var vh = window.innerHeight;
var heroEnd = vh * 1.4; // img-wrap (100vh) + spacer (40vh)
var mid = heroEnd * 0.5; // peak darkness at 70vh
var opacity = scrollY <= mid
? (scrollY / mid) * 0.65
: Math.max(0, (1 - (scrollY - mid) / (heroEnd - mid)) * 0.65);
overlay.style.background = 'rgba(0,0,0,' + opacity.toFixed(3) + ')';
overlay.style.display = (opacity < 0.002) ? 'none' : '';
if (!hidden && window.scrollY > 80) {
cue.classList.add('is-hidden');
hidden = true;