Nastro che accelera con lo scorrimento

/* Nastro che accelera con lo scorrimento
   Un nastro di parole che scorre da solo. Quando scorri la pagina accelera e si inclina nel
   verso della corsa, poi rallenta piano; col mouse o col dito lo puoi afferrare e lanciare.
   Il movimento è un numero che cresce a ogni fotogramma e si "avvolge" sulla larghezza
   di un pezzo: per questo non finisce mai e non salta. */
gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const CROCIERA = 60;        /* pixel al secondo quando nessuno tocca niente */
const SPINTA = 0.22;        /* quanto la velocità dello scorrimento spinge il nastro */
const PENDENZA = 0.012;     /* inclinazione per ogni pixel al secondo di velocità */
const MAX_PENDENZA = 10;    /* gradi al massimo */
const FRENO = 0.92;         /* quanto in fretta torna alla velocità di crociera (0-1, più alto = più lento) */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
let spintaScorri = 0;

/* la velocità dello scorrimento arriva da ScrollTrigger, in pixel al secondo */
ScrollTrigger.create({
  start: 0,
  end: 'max',
  onUpdate: (st) => { spintaScorri = st.getVelocity(); },
});

document.querySelectorAll('.nastro').forEach((nastro) => {
  const binario = nastro.querySelector('.binario');

Il codice di questa animazione è nell’accesso a vita.

L’anteprima resta libera: guardala, rallentala, provala sul telefono.