Difference between revisions of "Snow"

From EQdkp Plus
Jump to navigation Jump to search
Line 20: Line 20:
  
 
Hier die 3 Schneedateien.
 
Hier die 3 Schneedateien.
<gallery>
+
[[File:Schnee1.png|schnee1.png]]
https://eqdkp-plus.eu/wiki/File:Schnee3.png|Schnee3.jpg
+
[[File:Schnee2.png|schnee2.png]]
https://eqdkp-plus.eu/wiki/File:Schnee2.png|Schnee2.jpg
+
[[File:Schnee3.png|schnee3.png]]
https://eqdkp-plus.eu/wiki/File:Schnee1.png|Schnee1.jpg
 
</gallery>
 

Revision as of 15:28, 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 ) 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