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

Tighten scroll story runway

Browse source
This commit is contained in:
gator 2026-07-31 00:09:19 +00:00
parent 7b1f962633
commit a697f2485e
1 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
globe.js
View file

@ -60,8 +60,17 @@
cardWrap.appendChild(el); cardWrap.appendChild(el);
return el; return el;
}); });
// The scroll story needs one viewport of runway per chapter, plus the intro. /* Scroll runway per beat, as a fraction of the viewport.
document.getElementById("story").style.height = (CHAPTERS.length + 1) * 100 + "vh"; The original gave each chapter a full viewport, which on a pre-order page
means seven screens of scrolling before the visitor reaches anything they
can buy. Two thirds is enough to read a card and still let the globe travel
a visible distance between chapters — it just gets there sooner. */
var UNIT = 0.66;
// The sticky pane occupies one viewport that is NOT scroll runway, so the
// travel available is height - 100vh. Sizing this as (n+1)*UNIT left the last
// chapter unreachable — the payoff card peaked at 0.15 opacity and the
// wishes-turn-gold moment never actually landed.
document.getElementById("story").style.height = (100 + CHAPTERS.length * UNIT * 100) + "vh";
var state = { lon: 8, wished: new Set(WISHED), visited: new Set(VISITED) }; var state = { lon: 8, wished: new Set(WISHED), visited: new Set(VISITED) };
var world = null; var world = null;
@ -105,7 +114,7 @@
/* ── scroll → state ──────────────────────────────────────────────── */ /* ── scroll → state ──────────────────────────────────────────────── */
function story_tick() { function story_tick() {
var vh = innerHeight; var vh = innerHeight * UNIT;
var rect = story.getBoundingClientRect(); var rect = story.getBoundingClientRect();
var scrolled = -rect.top; var scrolled = -rect.top;
var fx = Math.max(0, Math.min(CHAPTERS.length, scrolled / vh)); var fx = Math.max(0, Math.min(CHAPTERS.length, scrolled / vh));