Trick # 250 | Dieser Beitrag beinhaltet 780 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Animierte Bilder und Texte sind eine grossartige Funktion, die Aufmerksamkeit erheischen und Ihre Website von anderen unterscheidet. Wir zeigen Ihnen hier, wie Sie ihren Bildern und anderen Divi-Elementen das «Schweben» beibringen.
Ein Bild sagt bekanntlich mehr als 1000 Worte – darum zeigen wir Ihnen erst mal, worum es geht:
Die Texte und das Bild schweben auf der Website auf und ab. Dies erreichen wir mit einem kleinen CSS-Code, welchen Sie auf Ihrer Website hinterlegen.
Kopieren Sie also den folgenden Code und fügen Sie ihn in das CSS-Stylesheet Ihrer Website ein. Und zwar im Backend unter Design/Customizer/Zusätzliches CSS:
@keyframes floating {
0% {transform: translate(0, 0px);}
50% {transform: translate(0, 20px);}
100% {transform: translate(0, 0px);}
}.floating {
animation: floating 7s ease-in-out infinite;
/* animation-iteration-count: 2; */
}
.floating1 {
animation-delay: -4.5s;
}
.floating2 {
animation-delay: -3s;
} Im Code haben wir in der Zeile 9 eine Option eingebaut: Wenn Sie das /* am Anfang und das */ am Ende der Zeile entfernen, wird die Animation nach zwei Durchläufen abgebrochen. Diesen Wert können Sie natürlich verändern, indem Sie eine andere Zahl einsetzen.
Nun müssen Sie noch die CSS-Klassen in die jeweiligen Elemente eintragen. Dafür bearbeiten Sie nacheinander alle Divi-Module, welche den Effekt zeigen sollen, wechseln in den Tab «Erweitert», klicken dort auf «CSS-ID und Klassen» und tragen im Textfeld «CSS Klasse» die gewünschten Klassen ein. Diese Klassen lassen sich auch kombinieren.
Unten zeigen wir Ihnen, welche Klassen in unserem Beispiel verwendet wurden:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
floating floating1At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
floating floating2floatingWerbung
Werbung
