Wenn Sie sich schon einmal gefragt haben, wie Sie eine 3D-Animation erstellen, die durch Bewegen der Maus sichtbar wird, bleiben Sie bis zum Ende dieses Textes bei uns und finden Sie es heraus.

Wir beginnen mit der Erstellung unserer Animationen, indem wir ein Bild-Widget hinzufügen. Wir fügen drei Bilder mit Bergen hinzu, um einen 3D-Effekt zu erzielen.

1.Hinzufügen des ersten Bildes

Als Erstes müssen Sie das erste Bild auswählen, das die erste Ebene des Berges darstellt. Stellen Sie in Elementor die Bildbreite auf 100% ein und stellen Sie dann unter „Erweitert“ im Abschnitt „Benutzerdefinierte Positionierung“ das Bild auf die absolute Position ein. Als nächstes müssen Sie den horizontalen und vertikalen Versatz auf VW einstellen. Dies hilft uns, unser Design an die Bildschirmbreite anzupassen. Als nächstes müssen Sie die vertikale Ausrichtung auf 25 vw und die horizontale Ausrichtung auf 2 vw einstellen.

2. Hinzufügen eines weiteren Bildes

Anschließend duplizieren Sie Ihr Bild und platzieren es auf einer anderen Ebene. Ändern Sie in den erweiterten Einstellungen unter „Benutzerdefinierte Positionierung“ die Versatzzahlen, löschen Sie die horizontale Zahl und lassen Sie die vertikale Zahl unverändert.

3. Hinzufügen eines dritten Bildes

Wiederholen Sie denselben Schritt, duplizieren Sie das Bild, wählen Sie Ihre dritte Ebene aus und stellen Sie im erweiterten Zuschneiden unter „Benutzerdefinierte Positionierung“ die Breite auf „Benutzerdefiniert“, dann die Einheiten auf „VW“ und die benutzerdefinierte Breite auf 120 vw ein. Als Nächstes müssen Sie den Offset in der horizontalen Ausrichtung auf -15 VW und in der vertikalen Ausrichtung auf 10 VW einstellen.

Jetzt fügen Sie Ihre Animation hinzu, indem Sie in den Bewegungseffekten die Mauseffekte aktivieren, auf Mausspur klicken und die Standardeinstellungen belassen. Ändern Sie die 3D-Neigung auf die gegenüberliegende Seite und stellen Sie die Geschwindigkeit auf 1 ein.

Überprüfen Sie, ob die Animation funktioniert, indem Sie mit der Maus über den Bildschirm fahren.

Um alle Ebenen einfacher verwalten zu können, sollten Sie auf den Navigator zugreifen, indem Sie mit der rechten Maustaste klicken und „Navigator“ auswählen und dann ein anderes Bild auswählen. Aktivieren Sie unter „Bewegungseffekte“ die Mauseffekte, klicken Sie dann auf „Mausspur“, ändern Sie die Bewegungsrichtung auf „geradeaus“ und die Geschwindigkeit auf 0,5 und stellen Sie die Geschwindigkeit der 3D-Neigung auf 2 ein.

Und das letzte Bild: Aktivieren Sie bei Bewegungseffekten die Mauseffekte, ändern Sie dann bei Mausspur die Bewegungsrichtung auf direkt und lassen Sie die Geschwindigkeit wie sie ist. Stellen Sie in 3D Tilt die Geschwindigkeit auf 1 ein.

Denken Sie daran, dass dieser Hover-Effekt auf Telefonen und Tablets nicht funktioniert, da dort keine Maus verwendet wird.

Überprüfen Sie den Erfolg, indem Sie die Maus über den Bildschirm bewegen.

Wenn Ihnen dieses kurze Tutorial zum Erstellen von Animationen gefallen hat, besuchen Sie bitte unsere Blog für weitere interessante Ideen.

Text und Bilder entnommen aus Quellen: Youtube