source: Klonkt/src/services/i18n.js@ a505f31

main
Last change on this file since a505f31 was a505f31, checked in by Robin <roboburr@…>, 3 weeks ago

Lezen: Lenis voor het snappen op desktop, plus twee kleine dingen

WAAROM LENIS, en dat is niet het vloeiende scrollen: de DUUR van een snap is
met native scroll-snap niet in te stellen -- die zit in de browser. Robin
vroeg om een snellere snap, en dat was declaratief onmogelijk. Lenis' snap-
pakket geeft ons duration, easing, distanceThreshold en debounce.

distanceThreshold 12% de vangzone (native: browsereigen, ~200-300px)
duration 0.4s in totaal onder de halve seconde
easing easeOutQuart -- op de helft van de tijd is 94% van de

weg af, daarna zacht uitdempen. Bewust niet
Lenis' standaard easeOutExpo: die schiet weg
en kruipt zo lang na dat het lijkt of hij niet
afmaakt.

debounce 60ms niet de standaard 500; dat voelt als te laat

ALLEEN OP DESKTOP (hover: hover en pointer: fine). Op touch doet Lenis van
zichzelf niets -- syncTouch staat uit -- en is het systeem-scrollen al
soepel. Daar blijft de native CSS-snap staan die er nu is, inclusief het
anker van nul hoog en de richtingsschakelaar. Robins keuze: "enkel voor
desktop, dat is prima, logisch dat het niet op mobiel kan".

Omhoog niet snappen gaat met Lenis via snap.stop()/start(), een stuk
schoner dan de CSS-eigenschap omzetten. Beide wegen delen dezelfde
richtingsdetectie uit wiel, vinger en toets.

NOG NIET UIT: smoothWheel. Dat kwam er na het snappen bij, en het is de kant
die oppassen vraagt -- een Mac-trackpad heeft zijn EIGEN momentum en Lenis'
demping komt daar bovenop. Vandaar lerp 0.2 in plaats van de standaard 0.1.
Robin vond dat op 20-8 nog steeds te zweverig, dus dat getal moet nog omhoog
of smoothWheel moet terug naar false. Die tweede stand werkte ook; dan doet
Lenis alleen de snap. Dat staat zo in het commentaar bij de instellingen,
zodat de volgende sessie niet hoeft te raden waar de knop zit.

Gevendored in src/assets/js/vendor (Lenis 1.3.26, MIT, 43KB samen), want de
CSP staat geen CDN toe. Dynamisch geimporteerd, dus mobiel haalt het niet
op. VENDOR_V ophogen als die bestanden wijzigen. De CSP hoefde niet aan:
strict-dynamic staat een import vanuit een vertrouwde module toe.

TWEE KLEINE DINGEN uit dezelfde ronde:

  • De terug-naar-boven-knop wijkt voor de mini-speler. Die kwam er anders bovenop te liggen (schermafbeelding). body.has-audio-player bestond al en wordt door audio-player.js gezet, dus dit volgt vanzelf.
  • Vastgepind is nu zichtbaar in de leestitel, met hetzelfde pin-icoon als in de tijdlijn. In de leesstroom staat een gepind bericht bovenaan zonder dat je ziet waarom. Nagekeken met een echte pin op dev.

style.css naar v82, MOD_V naar 19.

Suite 1169/1169.

Co-Authored-By: Claude Opus 5 <noreply@…>

  • Property mode set to 100644
File size: 291.8 KB

HTML preview not available, since the file size exceeds 256.0 KB.Try downloading the file instead.

Note: See TracBrowser for help on using the repository browser.