Farbverlauf Text Scroll Effekt wie auf der Apple Website (Tutorial)

Level:
Fortgeschritten 👍
Ergebnis anschauen
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Icon für einen externen Link

Apple verwendet häufig Farbverläufe auf ihren Text-Elementen, die sich während des Scrollens bewegen und dadurch dem Textblock einen geheimnisvollen Effekt mitgeben. Je nach Farbauswahl bekommt man es gut hin, den Text kurz mit einem Glanz oder Schein zu versehen und dann wieder abzudunkeln.


Ich zeige dir in diesem Tutorial mal, wie wir diesen Effekt in Webflow nachbauen und dafür den Blending-Mode „darken” in Webflow nutzen. Dadurch wird der Gradient nur auf den Buchstaben sichtbar und man kann ihn in einer Scroll-Animation nach oben und unten bewegen.


Auch responsive funktioniert die Animation super. Du musst nur aufpassen, falls du einen kürzeren bzw. längeren Text einfügst. Dann musst du die Scroll-Interaktion eventuell etwas anpassen oder die Textgröße kleiner stellen, damit der Textbaustein immer mittig im Browserfenster sitzt und man alles gut lesen kann.