gator/trekmap-preorder
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reveal animation is progressive enhancement, not a visibility dependency

Browse source
This commit is contained in:
gator 2026-07-29 23:09:16 +00:00
parent ef4e0c6b96
commit a3755d88c9
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -129,10 +129,11 @@
.foot .sp{margin-left:auto} .foot .sp{margin-left:auto}
/* ── reveal ── */ /* ── reveal ── */
.rev{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease} .rev{opacity:1}
.rev.in{opacity:1; transform:none} html.js .rev{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
html.js .rev.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ @media (prefers-reduced-motion:reduce){
.rev{opacity:1; transform:none; transition:none} html.js .rev{opacity:1; transform:none; transition:none}
html{scroll-behavior:auto} html{scroll-behavior:auto}
} }
@media (max-width:720px){ @media (max-width:720px){
@ -321,6 +322,9 @@
(function(){ (function(){
"use strict"; "use strict";
var reduce = matchMedia("(prefers-reduced-motion: reduce)").matches; var reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
// Arm the reveal animation only now that JS is definitely running — without
// this, a script failure would leave the page's content invisible.
if (!reduce) document.documentElement.classList.add("js");
/* ── scroll reveal ─────────────────────────────────────────────── */ /* ── scroll reveal ─────────────────────────────────────────────── */
var revs = document.querySelectorAll(".rev"); var revs = document.querySelectorAll(".rev");
@ -331,6 +335,10 @@
}); });
},{threshold:.14, rootMargin:"0px 0px -40px 0px"}); },{threshold:.14, rootMargin:"0px 0px -40px 0px"});
revs.forEach(function(el){ io.observe(el); }); revs.forEach(function(el){ io.observe(el); });
// Safety net: anything the observer somehow misses still becomes visible.
setTimeout(function(){ revs.forEach(function(el){
if (el.getBoundingClientRect().top < innerHeight*2) el.classList.add("in");
}); }, 2500);
} else { revs.forEach(function(el){ el.classList.add("in"); }); } } else { revs.forEach(function(el){ el.classList.add("in"); }); }
/* ── LED world map ───────────────────────────────────────────────── /* ── LED world map ─────────────────────────────────────────────────