Difference between revisions of "Snow"

From EQdkp Plus
Jump to navigation Jump to search
Line 23: Line 23:
 
[[File:Schnee2.png|schnee2.png]]
 
[[File:Schnee2.png|schnee2.png]]
 
[[File:Schnee3.png|schnee3.png]]
 
[[File:Schnee3.png|schnee3.png]]
 +
 +
<script async src="//jsfiddle.net/Darklirah/d6vx0kef/24/embed/result/dark/"></script>

Revision as of 15:59, 17 December 2018

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

<script async src="//jsfiddle.net/Darklirah/d6vx0kef/24/embed/result/dark/"></script>