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...")
 
Line 4: Line 4:
 
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.
 
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 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 [https://fastwp.de/magazin/css3-schnee-effekt/ HIER] gefunden )
 
Der Effekt wird dadurch realisiert, daß einfach im Hintergrund 3 verschiedene Bilder mit Schneeflocken animiert werden und mit unterschiedlicher Geschwindigkeit "fallen"
 
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.
 
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.
Line 19: Line 20:
  
 
Hier die 3 Schneedateien.
 
Hier die 3 Schneedateien.
 +
<gallery>
 +
https://eqdkp-plus.eu/wiki/File:Schnee3.png|Schnee3.jpg
 +
https://eqdkp-plus.eu/wiki/File:Schnee2.png|Schnee2.jpg
 +
https://eqdkp-plus.eu/wiki/File:Schnee1.png|Schnee1.jpg
 +
</gallery>

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