So entwerfen Sie eine animierte Uhr mit Divis Scroll-Effekten

Das Web ist voll von Websites, die zeitbezogene Designakzente benötigen (Geschwindigkeitsoptimierung, bevorstehende Veranstaltungen usw.). In den meisten Fällen kann ein Uhrsymbol oder eine Grafik hervorragend funktionieren. Aber das Erstellen eines animierten Uhrendesigns verleiht dem Design Ihrer Website definitiv einen einzigartigen „Dreh“.

Mit all den in Divi verfügbaren integrierten Designoptionen können wir ein fantastisches animiertes Uhrendesign von Grund auf neu erstellen. In diesem Tutorial erstellen wir eine animierte Uhr, die die Zeiger der Uhr dreht, wenn der Benutzer auf der Seite nach unten scrollt.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Laden Sie das animierte Uhr-Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Teil 1: Das Zifferblatt gestalten

Fügen Sie zunächst eine einspaltige Zeile zum regulären Abschnitt hinzu.

Zeileneinstellungen

Öffnen Sie vor dem Hinzufügen von Modulen die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Hintergrundfarbe: #003a5c

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Dachrinnenbreite: 1
• Breite: 50vw
• Maximale Breite: 500px
• Höhe: 50vw
• Maximale Höhe: 500px

• Abgerundete Ecken: 50%
• Rahmenbreite: 15px
• Rahmenfarbe: #ffffff

• Box Shadow: siehe Screenshot
• Vertikale Position des Boxschattens: 0px
• Stärke der Box-Schattenunschärfe: 68px
• Schattenfarbe: rgba(0,0,0,0.22)

Aktualisieren Sie auf der Registerkarte Erweitert die Sichtbarkeitsoptionen wie folgt:

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Teil 2: Hinzufügen der Stundenmarkierungen

Sobald die Reihe als Zifferblatt entworfen wurde, sind wir bereit, die Stundenmarkierungen hinzuzufügen, die zwölf 0 Uhr, drei 0 Uhr, sechs 0 Uhr und neun 0 Uhr darstellen. Jeder der Marker wird mit einem Teilermodul erstellt.

Die 12-Uhr-Markierung

Beginnen Sie damit, ein neues Trennmodul innerhalb der Reihe hinzuzufügen.

Aktualisieren Sie dann die Hintergrundfarbe wie folgt:

• Hintergrundfarbe: #78acf4

• Breite: 10vw
• Maximale Breite: 150px
• Höhe: 3px
• Abgerundete Ecken: 8px
• Transformieren Drehen Z-Achse: 90deg

Geben Sie dem Teiler unter der Registerkarte "Erweitert" eine absolute Position:

• Position: Absolut
• Ort: oben Mitte

Der 6-Uhr-Marker

Um den 3-Uhr-Marker zu erstellen, duplizieren Sie den Teiler, der zum Erstellen des 12-Uhr-Markers verwendet wurde. (An dieser Stelle ist es eine gute Idee, Ihre Module innerhalb des Ebenen-Modals zu beschriften.) Öffnen Sie dann den Duplikatteiler und aktualisieren Sie die Positionsposition wie folgt:

• Ort: unten Mitte

Die 3-Uhr-Markierung

Um den 3-Uhr-Marker zu erstellen, duplizieren Sie den 6-Uhr-Marker. Öffnen Sie dann die Einstellungen für das neue Duplikat (achten Sie darauf, es mit „3 Uhr“ zu beschriften) und ändern Sie Folgendes:

• Ort: rechts Mitte

Aktualisieren Sie dann die Transformationsoptionen wie folgt:

Unter der Registerkarte Übersetzen…

• Transformieren X-Achse verschieben: 50%

Unter der Registerkarte Drehung

• Transformieren Z-Achse drehen: 0deg

Die 9-Uhr-Markierung

Um den 3-Uhr-Marker zu erstellen, duplizieren Sie den 6-Uhr-Marker. Öffnen Sie dann die Einstellungen für das neue Duplikat (achten Sie darauf, es mit „9 Uhr“ zu beschriften) und ändern Sie Folgendes:

• Ort: linke Mitte

Aktualisieren Sie dann die Transformationsoptionen wie folgt:

Unter der Registerkarte Übersetzen…

• Transformieren Übersetzen X-Achse: -50%

Teil 3: Erstellen der Uhrzeiger (Sekunde, Minute und Stunde)

Sobald die Stundenmarkierungen vorhanden sind, können wir mit der Erstellung der Uhrzeiger beginnen. Wir beginnen mit der zweiten Hand.

Die zweite Hand

Um den Sekundenzeiger zu erstellen, duplizieren Sie den 12-Uhr-Teiler und ziehen ihn mit dem Ebenen-Modal unter den Rest der Teiler in der Spalte.

Dann beschriften Sie das neue Duplikat mit „Second“.

Öffnen Sie die Einstellungen des Moduls und aktualisieren Sie die Position unter der Registerkarte Erweitert:

• Ort: Zentrum Zentrum

Aktualisieren Sie auf der Registerkarte Design die Größe wie folgt:

• Breite: 20vw
• Maximale Breite: 200px
• Höhe: 0.5vw
• Maximale Höhe: 7,5 Pixel

Jetzt befindet sich der Sekundenzeiger in der Mitte des Zifferblatts, aber wir möchten, dass die Unterseite des Sekundenzeigers in der Mitte beginnt, wie es bei einem normalen Uhrzeiger der Fall wäre. Dann möchten wir, dass die Unterseite des Zeigers als Drehpunkt in der Mitte bleibt, damit sich der Zeiger wie bei einer echten Uhr drehen kann. Dazu müssen wir eine Kombination von Transformationsoptionen verwenden, um den Teiler von einem bestimmten Transformations-Ursprung aus zu positionieren und zu drehen.

Aktualisieren Sie Folgendes:

Unter der Registerkarte Übersetzen…

• X-Achse transformieren: 0% (dies ist ein wichtiger Schritt)

Auf der Registerkarte Drehung…

• Transformieren Drehen Z-Achse: -90deg

Unter der Registerkarte Ursprung…

• Ursprung der Transformation: Linke Mitte

Da sich diese Hand nach dem Hinzufügen des Scroll-Effekts sehr schnell bewegt, geben wir ihr eine halbtransparente Hintergrundfarbe, damit sie nicht zu sehr ablenkt.

• Hintergrundfarbe: rgba(175,175,175,0.12)

Der Minutenzeiger

Um den Minutenzeiger zu erstellen, duplizieren Sie das Sekundenzeigermodul und beschriften Sie das Duplikat „Minute“. Öffnen Sie dann das neue Trennmodul und aktualisieren Sie die Hintergrundfarbe:

• Hintergrundfarbe links: #78acf4
• Hintergrundfarbe rechts: #b0b9ff
• Verlaufsrichtung: 90deg

Aktualisieren Sie dann das Design wie folgt:

• Breite: 15w
• Maximale Breite: 150px
• Höhe: 1vw
• Maximale Höhe: 15px

Der Stundenzeiger

Sobald der Minutenzeiger fertig ist, duplizieren Sie das Sekundenzeigermodul und beschriften Sie das Duplikat mit „Stunde“. Öffnen Sie dann das neue Trennmodul und aktualisieren Sie die Hintergrundfarbe wie folgt:

• Hintergrundfarbe: #ffffff

Aktualisieren Sie dann die Größe unter der Registerkarte Design wie folgt:

• Breite: 10vw
• Maximale Breite: 100px

An diesem Punkt haben Sie alle drei Uhrzeiger für die Scroll-Effekte bereit!

Teil 4: Hinzufügen von Rotations-Scroll-Effekten zu jedem Uhrzeiger

Um die Uhrzeiger zu drehen, fügen wir jedem der drei Uhrzeiger den Rotations-Scroll-Effekt hinzu. Da wir mit einem Uhrendesign arbeiten, ist es wichtig, sich daran zu erinnern, dass wir die Drehungsgrade jedes Uhrzeigers verwenden können, um die aktuelle Zeit darzustellen. Eine Drehung des Stundenzeigers um 30 Grad würde beispielsweise 1 Uhr darstellen, 60 Grad wäre 2 Uhr und so weiter.

Rotations-Scroll-Effekt des Stundenzeigers

Zuerst fügen wir dem Stundenzeiger einen Rotations-Scroll-Effekt hinzu. Öffnen Sie die Stundenzeiger-Teilereinstellungen und fügen Sie den folgenden Transformationseffekt hinzu:

Unter der Registerkarte Rotation…

• Drehen aktivieren: JA
• Startrotation: 0deg (bei 10%)
• Mittlere Drehung: 15deg (bei 50%)
• Enddrehung: 30deg (bei 90%)

Rotations-Scroll-Effekt des Minutenzeigers

Als nächstes fügen wir dem Minutenzeiger einen Rotations-Scroll-Effekt hinzu. Öffnen Sie die Minutenzeiger-Teilereinstellungen und fügen Sie den folgenden Transformationseffekt hinzu:

Unter der Registerkarte Rotation…

• Drehen aktivieren: JA
• Startrotation: 0deg (bei 10%)
• Mittlere Drehung: 180 Grad (bei 50%)
• Enddrehung: 360 Grad (bei 90%)

Scroll-Effekt der Sekundenzeigerdrehung

Als nächstes fügen wir dem Sekundenzeiger einen Rotations-Scroll-Effekt hinzu. Öffnen Sie die Einstellungen für den Sekundenzeiger und fügen Sie den folgenden Transformationseffekt hinzu:

Unter der Registerkarte Rotation…

• Drehen aktivieren: JA
• Startrotation: 0deg (bei 10%)
• Mittlere Drehung: 5400deg (bei 50%)
• Enddrehung: 10800deg (bei 90%)

HINWEIS: Eine genaue Drehung des Sekundenzeigers, um 1 Stunde zu erreichen, würde eine Drehung von 21600 Grad erfordern. Aber da das viel zu schnell ist, hielt ich es für das Beste, das zu halbieren. Schließlich dient dies Designzwecken.

Endgültige Ergebnisse

Hier ist das endgültige Design.

Und das ist das Endergebnis der Scroll-Effekte. Beachten Sie, wie die Zeit beim Scrollen auf der Seite genau eine Stunde vergeht.

Abschließende Gedanken

Es ist ziemlich erstaunlich, dass wir ein Uhrendesign wie dieses mit Scroll-Effekten erstellen können, die die Zeit so genau darstellen. Fühlen Sie sich frei, mit dem Hinzufügen weiterer Rotations-Scroll-Effekte zu experimentieren, um die Zeit auf der Uhr beim Scrollen zu beschleunigen und zu verlangsamen. Außerdem können Sie dieses Uhrendesign verwenden, um viele CTAs oder Header hervorzuheben.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!