Trick # 536 | Dieser Beitrag beinhaltet 742 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Das Internet lebt von Bildern – wahrlich eine Binsenwahrheit. Aber die Bilder lassen sich leicht animieren. So dass sie etwa beim Laden einer Seite automatisch ein- oder auszoomen. Wie einfach das geht, zeigen wir Ihnen heute.
Zunächst fügen wir ein Bild auf der Website ein. So wie nebenan:
Das ist vorerst noch gar nix von Bewegung. Diese definieren wir mit folgendem CSS-Code.
Kopieren Sie den Code und fügen Sie ihn in das CSS-Stylesheet Ihrer Website ein – in WordPress unter Design/Customizer/Zusätzliches CSS:
/* Chrome, Safari, Opera */
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0.1,0.1);
}
to {
-webkit-transform: scale(1,1);
}
}
/* Standard syntax */
@keyframes zoom {
from {
transform: scale(0.1,0.1);
}
to {
transform: scale(1,1);
}
}
.growing-image {
-webkit-animation: zoom 8s;
/* Chrome, Safari, Opera */
animation: zoom 8s;
}Folgende Anpassungen im Code sollten Sie erwägen:
- Auf Zeile 4 und 13 können Sie die Startgrösse des Bildes angeben. Wir animieren das Bild von klein (0.1) , was 10 % der ursprünglichen Bildgrösse ausmacht.
- Weiter geht’s auf den Zeilen 7 und 16. Dort definieren wir die Zielgrösse des Bildes. In unserem Fall steht da 1, was 100 % der ursprünglichen Bildgrösse entspricht.
- Auf den Zeilen 20 und 22 können Sie noch die Animationsdauer in Sekunden festlegen. In unserem Fall sind es 8s – also 8 Sekunden.
Nun vergeben Sie dem gewünschten Bild noch eine CSS-Klasse. In unserem Fall ist dies «growing-image». In einem Bild-Modul des Divi-Themes fügen Sie diese Klasse im Tab «Erweitert» unter «CSS-ID und Klassen» ins Textfeld «CSS-Klasse» ein. Auch im WordPress-Editor lässt sich die CSS-Klasse beim Einfügen eines Bildes definieren.
Ist die Animation schon durch? Dann laden Sie einfach diese Seite per Mausklick auf diesen Link neu.
Auch Bilder beim Hovern zu animieren ist einfach. Wie Sie per Mauszeigerbewegung auch Ihre Bilder zum Leben erwecken, zeigen wir Ihnen etwa im Tipp «Bild-Modul des Divi-Themes stylen und animieren».
Werbung
Werbung
