CSS3 Schnee-Effekt

Inhaltsverzeichnis

Schnee mit CSS3

Die einen lieben ihn, die anderen hassen ihn. Die Rede ist vom Schnee. Nicht von dem da draußen in der Natur, sondern von dem, der auf Blogs schneit. Überall wird nun auf Weihnachten umgestellt, was die Designs weißer und hübscher werden lässt, hier und da Geschenke, Schneeflocken und Kristallkugeln sichtbar macht.

Fallender Schnee wird dabei gerne mit Javascript bzw. jQuery eingebunden, doch das ist meiner Meinung nach absolut nicht mehr zeitgemäß. Schon vor Jahren stellte ich euch eine Methode vor, um mit CSS 3 fallende Schneeflocken zu kreieren. Das war ganz nett, lief damals aber nicht performant genug bzw. wurde es von den Browsern noch nicht effektiv gerendert. Heutzutage ist das anders, denn CSS3 ist Standard geworden und selbst umfangreiche Animationen wie Schnee laufen inzwischen perfekt und flüssig.

Daher hier nun eine Möglichkeit, für einen CSS3 Schnee-Effekt. Ganz ohne Javascript, ganz ohne Umwege. Einfach ein bisschen Code hinzufügen, schon schneit es auf eurer Website.

Anleitung für CSS3 Schnee

1. Eigentlich ist das mit dem CSS3 Schnee-Effekt ganz simpel. Ihr braucht drei Bilder von Schneeflocken. Einmal die normalen, zweimal welche, die mit einem Weichzeichner bearbeitet wurden, um Tiefenschärfe zu erzeugen. So entsteht ein sehr realistischer und vor allem hübscher CSS3 Schnee-Effekt, der ganz einfach animiert und eingebunden werden kann. Damit ihr die Bilder nicht selbst erstellen müsst, habe ich mal drei Grafiken vorbereitet. Download: Bild 1, Bild 2, Bild 3.

2. Nun fügt ihr folgendes in eure CSS-Datei ein und zwar an die Stelle, an der nachher der Schnee-Effekt erscheinen soll. Sinnvoll ist das eigentlich nur im“Body”, weil es dann wunderschön im Hintergrund schneit. Wichtig ist, dass ihr hier die eventuell vorhandene Background-Farbe entfernt und mit der neuen ersetzt, denn sonst sieht der CSS3 Schnee-Effekt vielleicht etwas merkwürdig aus. Also in der CSS-Datei folgendes zum Body-Tag hinzufügen.

background-color: #C0E1FF !important;

background-image: 
    url('http://i.imgur.com/8zsjgyF.png'),
    url('http://i.imgur.com/wC1HUtA.png'),
    url('http://i.imgur.com/j5ekn4f.png');

-webkit-animation: schnee 25s linear infinite;
-moz-animation: schnee 25s linear infinite;
-ms-animation: schnee 25s linear infinite;
animation: schnee 25s linear infinite;
Code-Sprache: PHP (php)

Hinweis: Die Bilder habe ich mal, damit nichts schiefgeht, im Web hochgeladen. Ihr könnt sie aber auch selbst speichern. Dann müsst ihr aber noch die entsprechende URL im Code oben eintragen, damit die Bilder korrekt verlinkt sind.

3. Die Schneeflocken selbst sind nun integriert, doch was bringt das schon, wenn selbige nicht auch noch hübsch animiert werden? Dank CSS3 ist das denkbar einfach und erfordert vor allem nicht einmal viel Code. So bleibt der CSS3 Schnee-Effekt stets performant und läuft deshalb auch vollkommen flüssig. Fügt nun folgenden Code ganz unten in eure CSS-Datei ein bzw. unter dem Hauptteil für die Website.

@keyframes schnee {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
    }
}

@-moz-keyframes schnee {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
    }
}

@-webkit-keyframes schnee {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
    }
}

@-ms-keyframes schnee {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
    }
}
Code-Sprache: CSS (css)

CSS3 Schnee-Effekt

Und das war es dann schon. Der CSS3 Schnee-Effekt sieht fantastisch aus und ist butterweich animiert. Im Hintergrund eurer Website sollte nun langsam der Schnee fallen. Natürlich lässt sich die Geschwindigkeit dabei frei regulieren. Dazu müsst ihr nur die Zeit der Animations-Einträge im Body verändern. Statt “25s”, könnt ihr beispielsweise “35s” oder auch einfach nur “10s” eintragen. Dann fällt der CSS3 Schnee langsamer bzw. deutlich schneller.

Vielleicht ändert ihr die Geschwindigkeit auch einfach alle paar Tage, denn das bringt wieder eine gewisse Abwechslung für die Besucher mit sich und die mögen so etwas erfahrungsgemäß sehr gerne. Alles in allem bin ich der Meinung, dass der CSS3 Schnee-Effekt unnötigen Scripten unbedingt vorgezogen werden sollte. Und nun wünsche ich euch eine schöne und besinnliche Weihnachtszeit.

Christian Pust
WordPress & Onlinemarketing Experte mit über 15 Jahren Erfahrung. Entwickler & CEO von Trackboxx – der Google Analytics Alternative.

2 Antworten

Schreibe einen Kommentar

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

Das könnte dich auch interessieren

Du benötigst Unterstützung bei deinem WordPress Projekt?

Dein Ansprechpartner
Christian