Trick # 448 | Dieser Beitrag beinhaltet 590 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Ein weiterer Hingucker: Der Text, der auf der Seite aufpoppt und dem/der BetrachterIn zum Schein entgegenspringt. Einfach zu machen mit ein wenig CSS-Code.
Gestalten Sie ein Textmodul mit dem gewünschten Text, der Schriftgrösse usw. Nun vergeben Sie dem Modul den Klassennamen «text-pop-up» – diesen platzieren Sie im Tab «Erweitert» unter «CSS-ID und Klassen» im Feld «CSS-Klasse».
Im Anschluss kopieren Sie folgenden CSS-Code in das CSS-Stylesheet Ihrer Website – unter Design/Customizer/Zusätzliches CSS:
.text-pop-up {
-webkit-animation: text-pop-up 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: text-pop-up 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}@-webkit-keyframes text-pop-up {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: none;
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
}
}
@keyframes text-pop-up {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: none;
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
}
}Der Effekt wird am Schluss so aussehen:
Dies ist das Ergebnis.
Mit obigem Code wird der anzuzeigende Text nach dem ersten Popup-Durchgang einfach stehen bleiben. Um die Animation zu verdeutlichen, haben wir ihn hier in einen Loop gesetzt.
Werbung
Werbung
