Trick # 178 | Dieser Beitrag beinhaltet 0 Wörter. – Geschätzte Lesezeit: ca. 0 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.
Zugegeben: Es mag nicht der dringlichste Hack sein, den wir Ihnen heute vorstellen. Er zeigt mehr, wie vielfältig die Möglichkeiten mit ein wenig CSS-Code ist.
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.
Entpacken Sie das ZIP-File und speichern Sie die drei Bilder in der Mediathek Ihrer WordPress-Installation.
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;}
}Wichtig dabei: Passen Sie die drei URLs in Zeile 15 an. Im Beispiel zeigen diese auf die drei Schneeflocken-Bilder auf dem Server der dr-code.ch-Website. Diese sollten Sie mit den URLs der Bilder in Ihrer eigenen Mediathek ersetzen.
Voilà; schon schneit es auf Ihrer Website. Sogar mit gelegentlichem Seitenwind.
Am besten sehen Sie den Effekt freilich auf dunklerem Hintergrund. Etwa so wie in diesem Abschnitt.
User des Divi-Themes haben noch weitere Möglichkeiten, den Code einzusetzen:
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;}
}Nun können Sie die Klasse «let-snow» überall aufrufen, wo immer Sie möchten.
- 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
