marty/instantadpay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Homepage ticker: speed scales with text length (~70 px/s), pauses on hover/touch; CSS fallback 120 s

Browse Source 
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-12 16:40:23 -05:00
parent 99f6c1f8c6
commit 5b4fe133eb
3 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/home.js
+8
View File
@@ -69,6 +69,14 @@
const inner = IAP.$('tickerInner');
inner.innerHTML = events.map(ev => '<span>' + IAP.describeEvent(ev, c) + '</span>').join('');
IAP.$('ticker').hidden = false;
// readable pace (Marty, 2026-09-12): about 70 px per second no matter how much text is loaded,
// instead of a fixed 42 s for the whole strip; pause while a finger or pointer rests on it
const wrap = IAP.$('ticker');
const secs = Math.max(30, Math.round((inner.scrollWidth + wrap.clientWidth) / 70));
inner.style.animationDuration = secs + 's';
const pause = on => { inner.style.animationPlayState = on ? 'paused' : 'running'; };
wrap.addEventListener('mouseenter', () => pause(true)); wrap.addEventListener('mouseleave', () => pause(false));
wrap.addEventListener('touchstart', () => pause(true), { passive: true }); wrap.addEventListener('touchend', () => pause(false), { passive: true });
} catch (e) {}
}
// level cycler: chips + generation highlighting + auto-advance
public/assets/site.css
+1 -1
View File
@@ -176,7 +176,7 @@ h3{font-size:16.5px;margin:0 0 8px;font-weight:700}
background:rgba(67,232,195,.04);white-space:nowrap;padding:10px 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker .inner{display:inline-block;font-family:var(--mono);font-size:12.5px;padding-left:100%;animation:tick 42s linear infinite}
.ticker .inner{display:inline-block;font-family:var(--mono);font-size:12.5px;padding-left:100%;animation:tick 120s linear infinite}
.ticker .inner span{margin-right:48px;color:var(--muted)}
.ticker .inner span b{color:var(--mint);font-weight:600}
@keyframes tick{to{transform:translateX(-100%)}}