Apple Website Schriftzug Zoom-In Scroll Animation
Schritt-für-Schritt Anleitung: Perfekte Zoom-in Typo Animation erstellen – In diesem Video zeige ich euch, wie ihr eine beeindruckende Zoom-in-Typo-Animation wie auf apple.com erstellt. Es sieht einfach aus, aber tatsächlich musste ich zwei Stunden lang herausfinden, wie man diese Animation perfekt umsetzt. Der Effekt funktioniert auch echt gut auf Smartphones.
Wenn du das Tutorial anschaust, merkst du, dass der schärfste Schriftzug und die beste Performance nur mit einem SVG zu erreichen ist. Das ist tatsächlich auch der Weg den Apple nutzt. Der Nachteil ist, dass du für einen eigenen Schriftzug extra ein SVG Bild exportieren musst.Textelemente mit Scale größere zu animieren funktioniert nicht, da Chrome die Font dann unscharf rendert.
Video Timestamps
00:00 – Was wir bauen werden
01:08 – Aufbau / Struktur in Webflow
03:43 – Problem Herangehensweise 1
06:43 – Problem Herangehensweise 2
09:45 – Lösung mit SVG Schriftzug
16:48 – Ergebnis
Schritt-für-Schritt Anleitung: Perfekte Zoom-in Typo Animation erstellen
Willkommen zu meinem neuen Tutorial, in dem ich dir zeige, wie du mit Webflow eine beeindruckende Zoom-in Typo Animation erstellen kannst. Inspiriert von der Website apple.com, wirst du lernen, wie du dieses eindrucksvolle visuelle Element auf deine eigene Website bringen kannst. Lass uns gleich loslegen!
Inspiration auf apple.com
Auf meiner Suche nach inspirierenden Animationstechniken stieß ich auf die MacBook Air Seite auf apple.com. Die dortige Zoom-in Typo Animation hat mich sofort fasziniert und ich wusste, dass ich sie in einem Tutorial teilen musste. Sie sieht zwar einfach aus, aber das perfekte Ergebnis zu erzielen, erfordert etwas Arbeit.
Die Herausforderung
Ich nahm mir vor, diese Zoom-in Animation in einem 3-Minuten-Tutorial zu demonstrieren. Doch ich verbrachte tatsächlich 2 Stunden damit, herauszufinden, wie sie funktioniert und wie ich sie perfekt umsetzen kann. Das genaue Timing und der scharfe Effekt waren eine echte Herausforderung.
Der Aufbau der Animation
Beginnen wir mit dem Aufbau der Animation in Webflow. Zuerst fügen wir eine Section hinzu, die die gesamte Breite des Bildschirms einnimmt. Diese Section definiert auch die Scrolllänge, also die Dauer der Zoom-in Animation. Du kannst die Scrolllänge anpassen, um den gewünschten Effekt zu erzielen.
Das Sticky-Element
Als nächstes fügen wir ein Sticky-Element hinzu, das ebenfalls die volle Breite einnimmt. Dieses Element wird während des Scrollens im Viewport bleiben. Wir definieren den Anfangspunkt des Sticky-Elements und sorgen dafür, dass es immer sichtbar ist, während der Rest der Seite scrollt.
Die richtige Größe der Textelemente
Jetzt kommen wir zu den eigentlichen Textelementen. Wir erstellen ein Element innerhalb des Sticky-Elements und passen die Größe und den Stil des Textes an. Wir können die Schriftgröße basierend auf der Breite des Browserfensters festlegen und du kannst je nachdem wie dein Einsatzzweck ist, weitere Anpassungen vornehmen, um die Größe richtig einzustellen.
Die Scroll-Animation
Jetzt wird es spannend! Wir erstellen eine Scroll-Animation, die unseren Text vergrößert und den Zoom-in Effekt erzeugt. Wir verwenden das Element Trigger und legen fest, dass die Animation beim Scrollen in der Ansicht abgespielt werden soll. Die genauen Einstellungen und Schritte zeige ich dir in meinem Tutorial-Video.
Fazit und Ressourcen
Nutze diese Animationstechnik, um deine Website mit dynamischen und ansprechenden Elementen zu verbessern. Sei kreativ und experimentiere mit verschiedenen Textelementen und Größen.
Du findest den Link zum Cloneable-Projekt hier im Beitrag verlinkt, damit du das Tutorial direkt im Webflow Designer öffnen und für dein eigenes Projekt kopieren kannst.