How to Schneeflocken-Effekt: Wie Du es auf der Website schneien lassen kannst

Sorge mit diesem coolen Schneeflocken-Effekt ohne zusätzliches Plugin für Weihnachtsstimmung auf Deiner Website! Ich zeige Dir im Video wie. Let it snow ❄️

Ein cooler Overlay-Effekt für Deine Website

Sie sehen gerade einen Platzhalterinhalt von Vimeo. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen


Let it snow, let it snow, let it snow ❄️ In diesem Video zeige ich, wie Du mit wenigen Klicks für eine winterliche Stimmung auf Deiner Website sorgst.

Öffne die gewünschte Seite, auf der Du den Effekt anzeigen lassen möchtest, in Elementor. Dann gehe im Menü oben rechts auf die drei Striche > Seiteneinstellungen > Individuelle CSS.

Dort fügst den CSS Code von unter diesem Video ein und speicherst die Einstellungen.

Zurück auf der Seite, gehe in die Einstellungen des Abschnitts, wo Du den Effekt anzeigen lassen willst. Unter > Erweitert kannst Du die CSS Klasse „snow-ol“ bei > CSS-Klassen angeben. Abspeichern und siehe da, es schneit auf Deiner Website.

Code zum Kopieren für den Schneeflocken-Effekt

/**SNOWFLAKE OVERLAY**/
.snow-overlay {
position: relative;
}

.snow-overlay:after {
content: “;
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image: url(‚https://brittajust.com/wp-content/uploads/2025/11/snow-1.png‘), url(‚https://brittajust.com/wp-content/uploads/2025/11/snow-2.png‘), url(‚https://brittajust.com/wp-content/uploads/2025/11/snow-3.png‘);
animation: snow 10s linear infinite;
}

@keyframes 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;}
}

So kann das Ganze dann aussehen:

Britta surft mit Nikolausmütze ein Longboard.

Viel Spaß beim Schneien lassen!

6 Kommentare

  1. Vielen Dank Britta,
    ich liebe diesen Effekt und du hast alles gut verständlich erklärt!
    Ich verwende Divi und musste nur dieses Anführungszeichen austauschen, damit es klappt: content: “;

    Auf meiner Adventskalender Seite macht er gleich eine winterliche Stimmung. 🎄

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Über mich
Britta Just lächelt in die Kamera.
Hi, ich bin Britta 🖐️
Hier teile ich mein Wissen rund um modernes Webdesign und gebe Dir Tipps, wie Du Deine Website in eine Marketing­maschine verwandelst, die Dein Angebot auch dann verkauft, wenn Du im Urlaub bist oder Zeit mit Deinen Liebsten verbringst.
Aktuelles
Cover des Mini-Guides "Mach Dein Angebot auf Deiner Website sichtbar".
Mach Dein Angebot auf Deiner Website sichtbar

Hol Dir meinen Mini-Guide mit Tipps, wie Du Dein Angebot auf Deiner Website sichtbar machen kannst 👇

Weitere Artikel
20 Minuten, ein Kaffee, und los geht's mit dem Websitecheck: So bringst Du Deine Seite nach der Sommerpause in Form und bist startklar für ein starkes Q4.
Website selber bauen, sonst machst Du Dich abhängig? Von wegen! Warum Du nicht Webdesigner:in werden musst, um Deine Website selbst im Griff zu haben.
Blogseite & Archiv: So präsentierst Du Deine Artikel ansprechend, clever und hilfst Deinen Leser:innen, mehr Deiner Inhalte zu entdecken & leicht zu navigieren.
Fast fertig & Danke Seiten: Bestätige Deinen Besucher:innen, dass ihre Aktion erfolgreich war, und kom­muni­ziere klar den nächsten Schritt.
Yeah, ab in den Urlaub! So machst Du Deine Website startklar für die Sommerpause, damit Blog, Newsletter und Verkäufe auch in Deiner Abwesenheit weiterlaufen.
Zeitabhängige Sichtbarkeit: So zeigst Du mit dem Plugin „Dynamic Visibility“ Inhalte auf Deiner Webseite nur zu bestimmten Zeiten an – knackig erklärt im Video!