Schwebende iPad Scroll Animation für deine Website

Apple iPad Air Website-Animationen in Webflow nachbauen – Schritt für Schritt Anleitung

In diesem Tutorial erkläre ich, wie du das iPad Air Animations-Design in Webflow nachbauen kannst, ohne 3D-Renderings zu verwenden.

Die Grundlagen

Bevor wir anfangen, müssen wir ein paar Dinge klären. Für dieses Projekt habe ich eine Reihe von iPad Mockups verwendet, die ich bereits vorher erstellt hatte. Aber du kannst jedes Bild oder sogar ein animiertes Hintergrundvideo einsetzen. Wichtig ist, dass wir für diese Animation nur eine Interaktion anlegen, die dann auf alle Elemente mit der gleichen CSS Klasse angewendet wird.

Einen Bereich für die Scroll-Animation erstellen

Zunächst erstellen wir eine Sektion für unsere Scroll-Animation. Wir legen eine Mindesthöhe von 200 Viewport-Höhen (VH) fest, um sicherzustellen, dass genügend Platz für die Animation vorhanden ist. Dann machen wir den Textbereich zu einem 'sticky'-Element, das mit dem Scrollen der Seite mitschwebt, ähnlich wie die fliegenden iPads auf der Apple-Seite.

Hinzufügen der iPads und Anpassen des Layouts

Als nächstes fügen wir unsere iPad-Mockups hinzu und passen das Layout entsprechend an. Wir wollen, dass die iPads über die gesamte Breite der Seite schweben und nicht durch einen Container begrenzt werden. Deshalb packen wir sie in einen separaten 'Wrapper'-Div der 100% width hat.

Um den Eindruck zu erzeugen, dass die iPads leicht versetzt und überlappend sind, verwenden wir einen negativen Margin-Top von -30%. Damit das erste iPad nicht nach oben verschoben wird, geben wir ihm eine CSS Combo-Class und setzen Margin-Top auf 0.

Erstellen der Scroll-Animation

Nun kommen wir zum spannendsten Teil: der Erstellung der Scroll-Animation. Wir nutzen die 'While Scrolling in View'-Interaktion in Webflow und wenden sie auf jedes Element mit der Klasse 'iPad Item' an. Mit dieser Interaktion lassen sich Skalierung und Bewegung der iPads animieren.

Wir können zum Beispiel die Größe der iPads von groß auf klein ändern, während sie im Viewport scrollen. Oder wir können sie horizontal und vertikal bewegen, um die Illusion zu erzeugen, dass sie durch den Raum schweben.

Hinzufügen eines 3D-Effekts

Um den 3D-Effekt der Apple-Seite nachzuahmen, verwenden wir die CSS 'Rotate'-Transformation. Wichtig ist hier, dass wir dem Wrapper-Div der Ipad-Items eine 3D-Perspektive von 1000 Pixeln geben. Dies sorgt dafür, dass alle Kind-Elemente eine 3D-Perspektive erhalten, was die Animation realistischer wirken lässt.

Fazit

Durch Nachahmung der schwebenden Scroll-Animationen des iPad Air auf der Apple-Seite, kann man ein beeindruckendes Design in Webflow erstellen, welches sich sehr gut für Portfolio Seiten oder Kundenprojekte eignet. Und das Beste daran? Du kannst diese Animation sehr schnell duplizieren und auf der gesamten Website anwenden.

Zusammenfassung

• Beginne mit der Erstellung einer Sektion mit einer Mindesthöhe von 200 VH (Viewport-Höhe).
• Der Text-Container in der Sektion wird zu einem "sticky" Element gemacht, so dass er beim Scrollen sichtbar bleibt.
• Stelle sicher, dass die Scroll-Animation der iPads über die gesamte Breite des Bildschirms stattfindet.
• Mit Hilfe der "While Scrolling in View"-Funktion kannst du Animationen erstellen, die sich ändern, je nachdem, wie weit der Benutzer auf der Seite gescrollt hat.
• Die Verwendung von Skalierung, Bewegung und Rotation in deinen Animationen kann helfen, den Effekt der sich bewegenden iPads zu erzielen.
• Durch Ändern der Breite deines iPad Wrappers kannst du die Größe deiner Animation schnell anpassen und so einfach responsive machen.