Trick # 449 | Dieser Beitrag beinhaltet 491 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Texte in einem Textmodul des Divi-Themes können Sie vorzüglich mit einer Focus-In-Animation zum Eyecatcher umwandeln. Die Texte werden zunächst unscharf und gedehnt dargestellt und werden dann langsam schärfer und schmaler.
Dazu verwenden wir ein Textmodul und gestalten es nach unseren Wünschen. Im Tab «Erweitert», unter «CSS-ID und Klassen» fügen wir im Textfeld «CSS-Klasse» den Passus «focus-in-animation» ein.
Nun folgt ein Block CSS-Code, den Sie in das CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) einfügen können:
.focus-in-animation {
-webkit-animation: focus-in-animation 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: focus-in-animation 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes focus-in-animation {
0% {
letter-spacing: 1em;
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(12px);
transform: translateZ(12px);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
@keyframes focus-in-animation {
0% {
letter-spacing: 1em;
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(12px);
transform: translateZ(12px);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}Mit dem Code bleibt der Text nach Ablauf der Animation einfach stehen. Um den Effekt besser sehen zu können, haben wir das folgende Modul zusätzlich mit einem Animationsloop versehen:
Dies ist das Ergebnis.
Ziemlich einfach – und ziemlich wirkungsvoll.
Werbung
Werbung
