«Let it snow, let it snow, let it snow …» – Lassen Sie es auf Ihrer Website schneien

27. November 2022 | CSS-Stylesheet, Divi-Theme, WordPress

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.

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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This