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

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.