Difference between revisions of "Snow"

From EQdkp Plus
Jump to navigation Jump to search
(Created page with "Category:Tipps and Tricks 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-Sc...")
(No difference)

Revision as of 15:20, 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. 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.