Transcription
Hallo, mein Name ist Adam, ich bin Mitbegründer von Reloom und ich zeige Ihnen, wie Sie eine animierte Zeitleiste auf Webflow erstellen. Es gibt eine Vielzahl von Anwendungsfällen für diese Zeitleiste, also legen wir los und beginnen mit dem Aufbau, und wir hoffen, es gefällt Ihnen. Zuerst habe ich einen Abschnitt für die Überschrift der Zeitleiste erstellt. Als Nächstes erstellen wir einen separaten Abschnitt für die Zeitleiste, und der Grund dafür ist, dass die Fortschrittsanzeige, die Sie im Beispiel sehen, nicht tatsächlich animiert oder sich basierend auf Webflow-Animationen durch den Pfad bewegt. Sie bewegt sich durch den Pfad basierend auf ihrer Position auf dem Bildschirm und wird daher während des Scrollens der Seite oben auf dem Bildschirm fixiert sein. Wir möchten also einen separaten Abschnitt erstellen, in dem diese Fortschrittsanzeige der einzige sichtbare Abschnitt ist. Dazu müssen wir einen separaten Abschnitt für die Zeitleiste erstellen. Wir werden diesen "Timeline" nennen und innerhalb des Timeline-Abschnitts fügen wir eine weitere Div hinzu, die wir "Container" nennen. Innerhalb des Containers werden wir eine weitere Div haben, die wir "Timeline Wrapper" nennen. Der Timeline Wrapper ist im Grunde der Wrapper für alle Elemente innerhalb der Zeitleiste, einschließlich des Inhalts und der Fortschrittsanzeige. Für diesen werden wir ihn als Flex-Element einstellen, vertikal ausrichten und zentrieren. Dies soll sicherstellen, dass die Fortschrittsanzeige in der Mitte des Bildschirms zentriert ist, wenn wir sie erstellen. Das Erste, was wir tun werden, ist, den Inhalt zu erstellen. Wir fügen eine Div hinzu und nennen sie "Timeline Item". Das Timeline Item ist tatsächlich ein Grid, wir werden den Spaltenabstand auf Null setzen, drei Spalten hinzufügen und eine Zeile erstellen. Die erste Spalte wird Text sein, die mittlere Spalte wird wie der Kreis in der Fortschrittsanzeige sein und die dritte Spalte wird mehr Text sein. Wir werden also das Datum, den Kreis und dann den Inhalt haben. Für die Mitte der Fortschrittsanzeige werden wir sie auf 160 Pixel und 100 Pixel Breite einstellen. Okay, gut. Jetzt möchte ich einen Hintergrund für dieses Zeitleistenlayout erstellen, nur damit es sich mit der Überschrift einfügt. Wir gehen zum Timeline Wrapper, dann zum Timeline Item und beginnen mit der Erstellung der Spalten, den Spalten-Wrappern. Die erste wird eine Div sein und wir nennen sie "Timeline Left". Diese wird den gesamten Inhalt links umschließen. Dann fügen wir eine weitere Div hinzu und nennen sie "Timeline Center", und die letzte wird "Timeline Right" sein. Wir haben also drei Divs, um das Timeline Item zu umschließen. Für die linke Seite möchten wir einfach, dass der Text linksbündig ist. Um es einfach zu halten, werde ich die Textfarbe des Timeline Items weiß machen, damit Sie den Text tatsächlich sehen können, und wenn ich den Text zu jedem Wrapper hinzufüge, ist er automatisch weiß. Passen Sie also die Textfarbe der übergeordneten Elemente an. Okay, nennen wir dies "Timeline Date Text". Um dem Design zu entsprechen, möchten wir, dass dieser Text ziemlich groß ist und wir möchten, dass er etwas fett ist, und Sie wissen schon, wir haben die Farbe und wir nennen ihn Januar 2012. Dies ist der Beginn der Geschichte von Reloom im Jahr 2012. Alles klar, dann in der Mitte möchten wir einfach den Timeline Circle hinzufügen. Der Timeline Circle ist ein Kreis, der oh, ich kann Kreis nicht buchstabieren, ein Kreis, der 15 Pixel breit und 15 Pixel hoch ist. Dieser Kreis wird weiß sein und ein Kreis mit 100 Radius. Wir stellen sicher, dass diese Div zentriert ist, sie hat eine Flexbox, die den Kreis zentriert. Okay, fügen wir hier einen weiteren Textblock für den gesamten Text auf der rechten Seite der Zeitleiste hinzu und nennen ihn "Timeline Text". Wir machen ihn 20, 1.3, schön dick. Gut, super. Alles klar, und jetzt kann ich auch einfach einige Dummy-Inhalte hinzufügen, die für den Moment auf der Website verwendet wurden. Alles klar, gut. Zusätzlich fühlt es sich ziemlich breit an, also möchte ich die maximale Breite etwas reduzieren. Ich werde einfach die maximale Breite etwas verringern, sie etwas hereinholen. Schön aussehend, Schmiiiigo. Alles klar, also das Timeline Item, Timeline Item, wir werden etwas Abstand zwischen jedem Timeline Item haben, sonst sieht es einfach so aus, und wir werden 80 Pixel Abstand hinzufügen, um den Inhalt zu verteilen. Gut. Als Nächstes kommt die Timeline Progress Bar. Wir erstellen eine Div namens "Timeline Progress". Diese erste Div wird im Grunde den grauen Pfad erstellen, durch den die Fortschrittsanzeige verläuft. Um das zu erstellen, ziehe ich dieses Ding zuerst nach oben und ich werde es anklicken, ich werde es drei Pixel breit machen, ich werde es 100 machen, damit es 100% der Inhaltshöhe entspricht, und ich werde es absolut machen und ich werde es auch dunkel machen. Ja, das sieht gut aus. Alles klar, wir haben die erste Fortschrittsanzeige. Die eigentliche Fortschrittsanzeige werden wir innerhalb dieser Div erstellen und sie "Timeline Progress Progress" nennen, verdammt, ich kann nicht tippen, "Timeline Progress Bar" und wir machen sie drei Pixel breit, aber wir machen die Höhe 50 Viewport-Höhe. Der Grund dafür ist, dass sie, wenn wir sie oben auf dem Bildschirm fixieren, so aussieht, als würde sie sich bewegen, wenn sie den Pfad von 50% des Bildschirms durchläuft. Aber das ergibt wirklich keinen Sinn, aber ich zeige Ihnen, was ich meine. Wir wollen diese Fortschrittsanzeige auf "fixed" setzen und wir wollen die Viewport-Höhe auf 50 Viewport-Höhe setzen, wie ich vermute, die Positionierung hier unten, und wir machen sie weiß. Alles klar, jetzt können Sie sehen, wie die Fortschrittsanzeige den Pfad durchläuft. Alles klar, wir sind fast fertig. Als Nächstes, und das erklärt, warum wir einen eigenen Abschnitt für die Zeitleiste erstellt haben, werden wir zum Timeline Wrapper gehen und den z-Index auf -3 setzen, damit die Fortschrittsanzeige nicht durch die anderen Abschnitte erscheint. Dann gehen wir zu Timeline Progress und setzen ihn auf -2. Dann gehen wir zu Timeline Progress Bar und setzen ihn auf -1. Wenn Sie sich also die Timeline Progress Bar ansehen, bewegt sie sich. Was Sie bemerken werden, ist, dass diese Timeline Progress Bar nicht funktioniert, wenn Sie nur eine Zeitleiste isoliert haben. Sie benötigt mindestens 150 Viewport-Höhe darüber und darunter, was meiner Meinung nach funktionieren sollte, da fast alle Seiten einer Website einen Footer und eine Hero-Sektion haben. Das sollte das Design wirklich nicht beeinträchtigen, aber wenn Sie das nicht haben und nur eine gerade Zeitleiste wünschen, wird das Design kaputt gehen, es tut mir leid. Jetzt haben wir eine Fortschrittsanzeige und fügen wir ein paar weitere Elemente hinzu, um dieses Ding wirklich fliegen zu sehen. Okay, gut, es sieht gut aus, es sieht gut aus. Was fehlt, wenn ich zum Beispiel zurückkehre, sind die Elemente, die diese Fortschrittsanzeige auf die nächste Stufe heben, um ihr den Reloom-Touch zu geben, und das sind einige Animationen, die den Inhalt ein- und ausblenden, und wie Sie sehen werden, bewegt sich der Kreis tatsächlich durch die Länge oder Höhe des Inhalts. Um diesen Effekt zu erzielen, springen wir zurück und ich zeige Ihnen, wie das geht. Okay, fangen wir mit dem Effekt an, wenn er sich bewegt und der Kreis sich durch die Höhe des Inhalts bewegt. Zuerst wollen wir, dass das Datum das auch tut. Zuerst beginnen wir mit dem Datum. Wir gehen auf "sticky" und auf 50 Viewport-Höhe, und wir machen den Kreis zum gleichen "sticky" 50 Viewport-Höhe. Sehen wir uns das jetzt in Aktion an. Boom, drückt nach unten, drückt nach unten, drückt nach unten. Wir haben diesen Effekt. Okay, was jetzt noch übrig ist, ist die Erstellung einer Zeitleistenanimation, wenn das Timeline Item ins Bild scrollt und aufleuchtet. Machen wir das. Wir klicken auf Timeline Item, gehen zum Interactions-Panel und klicken auf Element Trigger. Wir gehen zu "while scrolling in view" und wir spielen Scroll-Animationen ab und fügen eine Scroll-Animation hinzu und nennen sie "Timeline Animation". Damit das tatsächlich funktioniert, wollen wir die Endanimation auf "start exiting" setzen und dann springen wir zurück hierher und wir beginnen, die Elemente auszuwählen, die wir animieren wollen. Ich möchte die Textfarbe von dieser Farbe in Weiß ändern. Und das Gleiche möchte ich auch für den Kreis tun. Ich werde die Hintergrundfarbe ändern. Ich werde dieses Ding duplizieren, es auf diese Seite ziehen, ich werde zurückgehen, wiederholen und dann dasselbe mit dem Text auf der anderen Seite tun. Seien Sie also einfach geduldig mit mir. Alles klar, wir haben die Animation fertig. Wie Sie sehen können, animiert sie sich, wenn Sie hineinscrollen. Aber die eigentliche Positionierung, wie das funktioniert, ist nicht ganz richtig. Wir wollen, dass die Animation einsetzt, wenn die Linie den Kreis erreicht. Das scheint ungefähr bei 58 zu sein. Ziehen Sie es also um 58 herein und wir wollen nicht, dass es zu schnell geht, also machen wir es etwa 63 Prozent und wir speichern und testen das. Es trifft, leuchtet auf, perfekt. Alles klar, da ich den Inhalt noch nicht richtig hinzugefügt habe, werde ich das alles löschen und einfach das Element mit der tatsächlichen Animation kopieren und einfügen und es testen. Großartig, da sind wir, die Zeitleiste funktioniert. Okay, zuletzt könnten wir am Ende dieser Zeitleiste einen Abschnitt hinzufügen. Und wir werden sehen, wie sie vollständig durchläuft. Da ist sie, das ist die Zeitleiste, Sie können sie hinzufügen, modifizieren, aber das ist die Basis des Reloom Timeline Cloneable. Wenn Sie Fragen haben, stellen Sie sie bitte in den Kommentaren. Und wenn Sie mehr Tutorials und Cloneables von Reloom sehen möchten, folgen Sie uns und abonnieren Sie uns. Abonnieren Sie auch diesen Kanal. Danke, dass Sie dabei waren, und ich freue mich auf das nächste Tutorial, das wir erstellen. Vielen Dank.