Snow

From EQdkp Plus
Revision as of 16:02, 17 December 2018 by Darklirah (talk | contribs)
Jump to navigation Jump to search

Let it snow ....

Im Winter ist es häufig zu sehen, daß auf Webseiten Schnee fällt. Häufig wird die mit mehr oder minder aufwändigen Java-Scripten realisiert. Das kann man, muß man aber nicht, es geht auch einfacher mit ein bisschen CSS und Anweisungen, die mittlerweile alle Modernen Browser ( nein nicht IE ) verstehen. ( Das Ganze habe ich HIER gefunden, mit ausführlicher Erklärung ) Der Effekt wird dadurch realisiert, daß einfach im Hintergrund 3 verschiedene Bilder mit Schneeflocken animiert werden und mit unterschiedlicher Geschwindigkeit "fallen" Die Schwierigkeit bei eqdkp-Plus ist es eine Schicht zu finden, die durch die Animation nicht gestört wird oder die Webseite un-bedienbar macht, da die Animation im Vordergrund über der Bedienoberfläche liegt. Für mich hat sich der Wraper als ideale Oberfläche herausgestellt:

/*Schnee Effekt */
#wrapper{
background-color:rgba(0,0,0,0) !important;background-Image:url('PfadzurDatei/schnee1.png'),url('PfadzurDatei/schnee2.png'),url('PfadzurDatei/schnee3.png');-webkit-animation:schnee 25s linear infinite;-moz-animation:schnee 25s linear infinite;-ms-animation:schnee 25s linear infinite;animation:schnee 25s linear infinite;
}
@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}}

/*****************/

Hier die 3 Schneedateien. schnee1.png schnee2.png schnee3.png

Hier eine kleine Vorschau: JSfidle Wenn ihr euch 3 Bilder mit farbigen Punkten erstellt, habt ihr für den Karneval auch Konfetti