Trick # 178 | Dieser Beitrag beinhaltet 1277 Wörter. – Geschätzte Lesezeit: ca. 7 Minuten.
Haben Sie die Adventsdekoration schon aus dem Schrank geholt? Und die alte Bing-Crosby-Platte aufgelegt? Wenn Ihnen zum heutigen ersten Advent schon vorweihnächtlich zumute ist, möchten Sie es vielleicht auf Ihrer Website schneien lassen. Nichts leichter als das.
Zunächst benötigen Sie für die Schneeflockenanimation drei transparente Bilder mit weissen Punkten. Wir haben Ihnen ein Set vorbereitet – sie können es mittels nachfolgendem Button herunterladen.
Nun haben Sie eine Reihe von Möglichkeiten:
1. «Let it snow» auf der gesamten Website
Möchten Sie es auf allen Seiten und Inhalten Ihrer Website schneien lassen? Dann benötigen Sie folgenden CSS-Code. Kopieren Sie ihn in das CSS-Stylesheet Ihrer Website. Dieses finden Sie unter Design/Customizer/Zusätzliches CSS:
body {
position: relative;
}body:before {
content: '';
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image: url('https://dr-code.ch/wp-content/uploads/schneeflocken1.png'), url('https://dr-code.ch/wp-content/uploads/schneeflocken2.png'), url('https://dr-code.ch/wp-content/uploads/schneeflocken3.png');
animation: let-snow 10s linear infinite;
}@keyframes let-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}@-moz-keyframes let-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}@-webkit-keyframes let-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}@-ms-keyframes let-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}Am besten sehen Sie den Effekt freilich auf dunklerem Hintergrund. Etwa so wie in diesem Abschnitt.
2. «Let it snow» auf einer einzelnen Seite im Divi-Theme
Obigen CSS-Code können Sie auch auf einer einzelnen Seite oder in einem Beitrag zeigen, den/die Sie mit dem Divi-Builder erstellt haben. Dieser Beitrag nutzt diesen Trick. Es schneit nur hier – auf den anderen Inhalten dieser Website ist die Lage «schneefrei».
- Öffnen Sie also die gewünschte Seite oder den gewünschten Beitrag im Backend.
- Nun klicken Sie im violetten Builder-Balken oben auf das Zahnrad-Icon.
- Öffnen Sie «Benutzdefinierte CSS» und …
- … fügen Sie den oben genannten CSS-Code in das Fenster ein.
Schon schneit es auf exakt (und ausschliesslich) auf der betreffenden Seite/auf dem betreffenden Beitrag.
3. «Let it snow» in bestimmten Divi-Sektionen, -Zeilen oder -Modulen
Ferner haben Sie im Divi-Theme die Möglichkeit, Schneeflocken nur über Sektionen (Sections), Zeilen (Rows) oder Module wimmeln zu lassen.
Der CSS-Code hierfür ist leicht angepasst. Sie finden ihn nachfolgend. Kopieren Sie ihn und passen Sie auch hier die drei Bild-URLs in Zeile 15 mit den URLs der Dateien in Ihrer WordPress-Mediathek an. Speichern Sie den ganzen Textblock in das CSS-Stylesheet Ihrer Website, welches Sie unter Design/Customizer/Zusätzliches CSS finden.
.let-snow {
position: relative;
}.let-snow:after {
content: '';
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image: url('https://dr-code.ch/wp-content/uploads/schneeflocken1.png'), url('https://dr-code.ch/wp-content/uploads/schneeflocken2.png'), url('https://dr-code.ch/wp-content/uploads/schneeflocken3.png');
animation: let-snow 10s linear infinite;
}@keyframes let-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}@-moz-keyframes let-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}@-webkit-keyframes let-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}@-ms-keyframes let-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}- Bearbeiten Sie die gewünschte(n) Section (Sektion), Zeile (Row) oder Module im Dici-Theme
- wechseln Sie auf «Erweitert» (oder «Advanced»
- klicken Sie auf CSS-ID und Klassen
- und fügen Sie den Klassennamen «let-snow» ins Feld «CSS-Klasse» ein.
Schon heisst es «Pulver gut» auf allen gewünschten Elementen oder Bereichen Ihrer Divi-Website.
Ach ja: Schneeschippen müssen Sie übrigens mit unserem Trick nicht. Aber gelegentlich die Bing-Crosby-Platte drehen.
Werbung
Werbung
