lab Home
07

Velocity marquee — bandeau qui accélère au scroll

GSAP / Observer

Chargement de la démo…

Scrollez la page : le bandeau accélère et change de sens.

Un bandeau défilant (clients, valeurs, slogan) qui réagit au scroll : la page paraît vivante.

Intensité
Performance
Léger
Mobile
Fonctionne au doigt (scroll tactile).
Accessibilité
Bandeau immobile, texte lisible.
Idéal pour
AgenceÉvénementielMusique / labelMode / streetwear

Featured :

  1. 1.Piste dupliquée deux fois, position bouclée avec gsap.utils.wrap(-50, 0) : aucune couture visible
  2. 2.Boucle pilotée par gsap.ticker.add() et gsap.quickSetter(track, 'xPercent'), indépendante du framerate
  3. 3.Vitesse du scroll lue par Observer.create({ type: 'wheel,touch,scroll', onChangeY }) ; le sens suit le scroll
  4. 4.Le boost retombe en douceur : gsap.to(state, { boost: 0, duration: 0.8, overwrite: true })
Next