Nur-CSS-Laufbandeffekt

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Sie stellen sicher, dass der Text mehr als die doppelte Breite des Bildschirms hat, und verwenden dann negative translate-Animationen, um die Laufbandbewegung auszuführen.

Sie möchten wahrscheinlich aria-hidden auf alle außer einem der Elemente setzen, wenn Sie den Text duplizieren müssen. Oder Sie können einen sehr cleveren CSS-Trick verwenden, um den Text mit text-shadow zu "duplizieren".

Es ist schön zu sehen, dass prefers-reduced-motion dabei ist und den Effekt stoppt, wenn es sein sollte.

Direkter Link →