Agentur Website: Teamseite aufbauen und animieren
In diesem Tutorial bauen wir zusammen eine längere Sektion, die du in deiner Team-Seite integrieren kannst. Die Bilder der Mitarbeiter werden verteilt auf der Seite dargestellt und nach und nach rein animiert. Das Besondere ist, dass wir dabei mit einer „scroll into view” Animation arbeiten und dafür nur die schon vorgefertigten Animationstypen von Webflow verwenden. Damit ist es ziemlich einfach, jedes beliebige Element auf einer Website zu animieren. Schau dir für den kompletten responsive Aufbau gerne das kostenlose Cloneable in meinen Webflow Showcases an.
Erstellung einer beeindruckenden Team-Section mit Effekten
In diesem Tutorial zeige ich dir, wie du eine ansprechende Team-Section erstellst. Wir platzieren diese Section entweder im oberen Bereich als Intro oder auch in der Mitte der Webseite. Dabei verwenden wir einen interessanten Effekt: Der Text wird hinter einem Div hervorgeschoben und die Bilder werden elegant vergrößert. Beim Scrollen werden die Elemente wieder sanft in ihre Position skaliert. Und das Beste ist, dass wir das alles mit den nativen Webflow-Interaktionen umsetzen, ohne eine benutzerdefinierte Interaktion anlegen zu müssen.
Um den Effekt des hochschiebenden Textes zu erzielen, nutzen wir die bereits vordefinierten Webflow-Interaktionen. Dadurch bleibt unsere Interaktions-Leiste übersichtlich und aufgeräumt. Du kannst das gesamte Projekt in der Videobeschreibung finden und kostenlos in deinem Webflow-Dashboard duplizieren. So kannst du es für deine eigene Webseite verwenden oder dir genauer anschauen, wie bestimmte Dinge umgesetzt wurden.
Zu Beginn integriere ich etwas Text und platziere den Team-Intro-Rahmen um ihn herum. Wir geben ihm eine Höhe von 100 VH (Viewport-Höhe), damit er auf mobilen Geräten den gesamten Bildschirm ausfüllt. Zusätzlich erhöhen wir die Höhe möglicherweise, um den Text ein wenig nach oben zu verschieben.
Um die Teammitglieder anzuordnen, erstellen wir einen Inhalt und verwenden Flexbox, um zwei Spalten zu erstellen. Dadurch werden die Teammitglieder nach außen gedrückt. Jede Spalte soll maximal 50 Prozent Breite haben.
Jetzt fügen wir die Teammitglieder hinzu. Wir erstellen eine Team-Member-Div und fügen ein Bild hinzu. Jedes Mitglied wird in einem eigenen Div platziert, damit wir sie einzeln stylen können. Wir geben den Teammitgliedern eine relative Position und definieren eine feste Breite von etwa 10em. Die Bilder erhalten eine Breite und Höhe von 100 Prozent, um den gesamten Bereich auszufüllen.
Um den runden Effekt zu erzielen, fügen wir einen Box-Schatten hinzu. Hier können wir mit den Werten spielen, um den gewünschten Effekt zu erzielen.
Jetzt geht es darum, Animationen hinzuzufügen. Wir verwenden die vordefinierten CSS-Animationen von Webflow. Dazu erstellen wir eine Klasse namens "Grow Animation" und wenden sie auf die Teammitglieder an. Diese Klasse löst die Animation beim Scrollen in den sichtbaren Bereich aus. Wir können verschiedene Animationseffekte auswählen, wie z.B. "Flip", "Bounce" oder "Jiggle". Dadurch werden die Teammitglieder lebendig und interaktiv.
Um die Texte in der Team-Section zu animieren, erstellen wir für jede Zeile einen eigenen Div-Container. Wir verstecken den Text zuerst und verwenden dann die "Slide"-Animation, um ihn einzublenden. Jede Zeile erhält eine eigene Animation mit einem kleinen Verzögerung, um den Effekt schrittweise abzuspielen.
Es ist wichtig zu beachten, dass bei der Verwendung von Animationen in Webflow auf die reaktionsschnelle Darstellung geachtet werden muss. Einige Animationen können sich auf verschiedenen Bildschirmgrößen unterschiedlich verhalten. Daher ist es ratsam, die Animationen gründlich zu testen und sicherzustellen, dass sie auf allen Geräten optimal funktionieren.