Wir haben die Idee des Animierens von geschwungenem Text vor nicht allzu langer Zeit behandelt, als ein lustiger Artikel der New York Times erschien. Ich habe nur kurz hineingeschaut, wie sie es gemacht haben, und die relevanten Teile in einer isolierteren Demo extrahiert.
Diese Demo ist hier
Sieh dir den Pen an
Selfie Crawl von Chris Coyier (@chriscoyier)
auf CodePen.
@keyframers haben es viel besser als ich behandelt und dieses Video gemacht. (Ernsthaft, es ist so klar und prägnant – es ist eine großartige Betrachtung.)
Besonders gut gefällt mir, wie schnell und einfach das Erstellen, Exportieren, Optimieren und Integrieren der eigentlichen SVG-Codes in ihrer Demonstration ist.
Ihre endgültige Demo
Sieh dir den Pen an
SVG textPath Animation beim Scrollen Tutorial | Keyssentials: Web Animation Tips von @keyframers von @keyframers (@keyframers)
auf CodePen.
Tag für Tag überprüfen wir Websites mit Div-Suppen und schlichtweg falschem HTML, schlechter als vor 5-6 Jahren, aber die Leute wollen immer noch Dinge auf einer Seite bewegen, meistens ohne dass die Benutzer darum bitten. Genial.
Hier ist also eine kleine Erinnerung, wie man es für die meisten von uns über 14 Jahren weniger schlecht macht
– https://www.scottohara.me/note/2019/07/12/reduced-motion-video.html
– https://css-tricks.de/introduction-reduced-motion-media-query/
– https://a11yproject.com/posts/understanding-vestibular-disorders/