Effektvolle Schnee-Animation - schnell und einfach auf deiner Webseite
Unsere Javascript Schnee-Animation simuliert einen realistischen Schnee-Effekt mit individuellen Konfigurationsmöglichkeiten. Ob ruhig und besinnlich fallender Schnee oder ein kräftig wirbelnder Schneesturm, bei uns gibt es Schneeflocken jeder Art für deine Homepage.
Unsere Schnee-Animationen eignen sich für alle Webseiten, die in der Weihnachtzeit ihren Look anpassen wollen oder sich das ganze Jahr lang mit der Thematik Winter (Wintersportarten, Winterurlaub, Wintermode uvm.) beschäftigen.
Für wen sind Schnee-Animationen geeignet?
Unsere Schnee-Animationen sind geeignet für alle Webseiten, Shops und Blogs. Gerade in der Weihnachtszeit verleiht der realistische Schnee-Effekt deiner Website einen winterlichen Touch. Ob Profi-Onlineshop oder Hobbyblogger, mit der individuell angepassten Schnee-Animation wird jeder Webseite der letzte winterliche Schliff gegeben, der die Nutzer in ein Winterparadies katapultieren lässt.
Individuelle Schnee-Animationen - Passe deinen Schnee-Effekt individuell an
Die Anpassungsmöglichkeiten unserer Schnee-Animation sind groß. Neben der Schneemenge, kann auch die Verwirbelung des Schnees und die Fallgeschwindigkeit variiert werden. Außerdem können Nebel- und/oder Gewittereffekte erzeugt werden. So kannst du deine ganz persönliche und individuelle Schnee-Animation für deine Webseite erzeugen. Deiner Fantasie sind keine Grenzen gesetzt. Den Schnee Konfigurator findest du hier
Anpassungsmöglichkeiten
Schneemenge:
Reguliere die Menge des fallenden Schnees. In Kombination mit der Fallgeschwindigkeit können hier auch hinsichtlich der Performance auf schwächeren Anzeigegeräten Optimierungen vorgenommen werden.
Verwirbelung:
Gib den Grad der Verwirbelung der Schnee-Animation an - von absolut senkrecht fallenden Schneeflocken bis hin zu rasant wirbelnden Schneeflocken.
Fallgeschwindigkeit:
Konfiguriere die Geschwindigkeit des Schneefalls. Diese Einstellung kann in Kombination mit der Schneemenge auch zu Optimierungen auf performanceschwächeren Geräten genutzt werden.
Hintergrund-Nebel:
Schalte den Nebeleffekt im Hintergrund für eine noch realistischere Darstellung an.
Gewitter:
Schalte die dynamischen Blitze für einen Gewitter-Effekt an oder aus.
Vollbild:
Zeig die Schnee-Animation über die Fläche des kompletten Browserfensters an oder beschränke den Schnee-Effekt auf einen vorgegebenen Bereich. Gib dafür die ID eines DIV-Elements an.
Wie wird die Schnee-Animation erstellt?
Die realistische Wirkung des Javascript-Schnee-Effekts wird durch eine zufällige Darstellung einzelner Schneeflockenbilder erzielt. Durch dieses Zufallsprinzip entsteht ebenso die Verwirbelung des Schneefalleffekts. In Kombination mit einer variablen dynamischen Beschleunigung der Schneeflocken, ermitteln und führen zufällig generierte Werte zu dem auf dieser Webseite präsentierten Ergebnis.
Wie wird die Schnee-Animation auf der Webseite integriert?
Die Integration deiner individuellen Schnee-Animation ist kinderleicht. Folge einfach unserer Anleitung und im Handumdrehen rieselt Schnee über deinen Bildschirm.
Die einzelnen Schritte in der Übersicht:
2 Upload der Daten auf den eigenen Server
1 Entpacken der Zip-Datei
Du hast das Script für deine persönliche Schnee-Animation soeben als Zip-Datei herunterladen. Bitte entpacke diese Zip-Datei "ador-design_snow-effect.zip" nun auf deiner Festplatte.
2 Upload der Daten auf den eigenen Server
Du musst das Script für den Schnee-Effekt auf deinen Webserver oder Webspace hochladen, damit du es einbinden kannst. Bitte verbinde dich z.B. per FTP mit deinem Server und navigiere in das Root-Verzeichnis deiner Webseite. Das Root-Verzeichnis ist die oberste Ebene (Stammverzeichnis) deiner Webseite, dort befindet sich üblicherweise die Startseite (z.B. index.html).
- Lade nun die beiden Verzeichnisse unseres Scripts "js" und "images" auf deinen Webserver hoch.
- Lade anschließend die beiden Dateien "snow_demo_div.html" und "snow_demo_fullscreen.html" auf deinen Webserver hoch.
3 Schnee Effekt testen
Wenn du alle Schritte erfolgreich erledigt hast, kannst du nun die beiden Demo-Dateien aufrufen, um zu testen, ob die Integration erfolgreich war. Rufe dazu bitte die folgende URL auf:
- Vollbild Demo: www.Deine-Domain.de/snow_demo_fullscreen.html
- DIV-Demo: (der Schnee wird nur in dem angegebenen Bereich angezeigt): www.Ihre-Domain.de/snow_demo_div.html
Wenn du die beiden Beispiele auf deinem eigenen Webserver aufrufen kannst, war die Integration erfolgreich und der Schnee-Effekt ist voll einsatzbereit. Nun kannst du mit Schritt 4 und der Integration in die eigene Webseite fortfahren. Hinweis: Nachdem der Test erfolgreich war, kannst du die beiden Dateien (snow_demo_div.html und snow_demo_fullscreen.html) wieder von deinem Server löschen. Bedenke aber, dass du diese dann nicht mehr aufrufen und anschauen kannst, wenn du ein Beispiel benötigst.
4 Integration in die eigene Webseite
Es gibt zwei Möglichkeiten, den Schnee Effekt auf der eigenen Webseite zu integrieren.
- Vollbild (seitenfüllend) über die gesamte Webseite
- in einem definierten Bereich (div) auf der Webseite
Grundsätzliche Integration
Unabhängig davon, ob du Möglichkeit 1 oder 2 der Integration wählst, musst immer den folgenden Schritt erledigen: Du musst die folgenden 2 Zeilen auf jeder Seite, auf welcher die Schnee-Animation erscheinen soll, integrieren. Platziere die folgenden 2 Code-Zeilen ganz am Ende, direkt vor dem schließenden "</body>" Tag:
Beispiel:
<body>
...
<script type="text/javascript" src="/js/snow-effect.js"></script>
</body>
1. Vollbild-Integration:
Zusätzlich zu der grundsätzlichen Integration musst du für die Vollbild-Integration den folgenden Schritt erledigen: Siehe dir als Beispiel den Quellcode (Inhalt) der Datei: "snow_demo_fullscreen.html" an. Du musst die folgende Zeile zusätzlich auf jeder Seite, auf welcher der Schnee-Effekt erscheinen soll, integrieren:
<script>goAdorSnow('', -100000, './wolken1.png', true, true, false, 0.5, 0.5, 0.4);</script>
Platziere die oben stehende Code-Zeile direkt nach den beiden im Schritt zuvor platzierten Zeilen.
Beispiel:
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Und ich bin ein toller Text...</p>
<script type="text/javascript" src="/js/snow-effect.js"></script>
<script>goAdorSnow('', -100000, './wolken1.png', true, true, false, 0.5, 0.5, 0.4);</script>
</body>
2. Integration in einen definierten Bereich:
Zur grundsätzlichen Integration musst du außerdem den folgenden Schritt erledigen. Sieh dir als Beispiel den Quellcode (Inhalt) der Datei: "snow_demo_div.html" an. Du musst die folgende Zeile zusätzlich auf jeder Seite, auf welcher der Schnee-Effekt erscheinen soll, integrieren:
<script>goAdorSnow('meinSchneeDiv', -100000, './wolken1.png', true, true, false, 0.5, 0.5, 0.4);</script>
Zusätzlich musst du nun den Bereich definieren, in dem die Schnee-Animation erscheinen soll. In unserem Beispiel nehmen wir das Div-Element mit der ID "meinSchneeDiv".
Beispiel:
<body>
<h1>Ich bin eine Überschrift</h1>.
<div id="meinSchneeDiv">
<p>Und ich bin ein toller Text...</p>
</div>
<script type="text/javascript" src="/js/snow-effect.js"></script>
<script>goAdorSnow('meinSchneeDiv', -100000, './wolken1.png', true, true, false, 0.5, 0.5, 0.4);</script>
</body>
Der Schnee-Effekt wird nun in dem angegebenen Bereich erscheinen.
Statt "meinSchneeDiv" kannst du das Div-Element auch beliebig anders benennen oder mehrere definieren. Achte aber darauf, dass jedes Div-Element einen eigenen und eindeutigen Namen hat. Um mehrere verschiedene Bereiche mit dem Schnee-Effekt zu versehen, musst du dann lediglich die "goAdorSnow..." Zeile kopieren und mit dem entsprechenden Namen duplizieren.
5 Der Schnee-Konfigurator
Du kannst den Schnee-Effekt über unseren Konfigurator beliebig konfigurieren und anpassen. Den Schnee-Effekt-Konfigurator findest du hier: Schnee Konfigurator
Nachdem du den Schnee-Effekt konfiguriert hast, findest du direkt unter dem Konfigurator den Bereich "Integration". Dort kannst du noch wählen, ob der Schnee im Vordergrund oder Hintergrund angezeigt werden soll und anschließend das Code-Snipet kopieren. Tausche das Code-Snippet nun einfach gegen das Code-Snipet auf deiner eigenen Webseite aus. Das kannst du beliebig oft wiederholen und so die Schnee-Animation ständig verändern, wenn gewünscht.
Schnee-Effekt: Hol dir jetzt die Schnee-Animation für deine Webseite
Hol dir deinen persönlichen Schnee-Effekt für deine Webseite mit individuellen Konfigurationsmöglichkeiten. Die Integration erfolgt dank interaktiven Konfigurators. Du benötigst keine Programmierkenntnisse, um die Schnee-Animation anzupassen.
Sichere dir hier und jetzt die individuell angepasste Schnee-Animation für das ganz besondere Schneeerlebnis auf deiner Website.
Zufriedene Kunden
Die Integration des Tools ist sehr einfach. Der Schneeeffekt wirkt sehr schön und passt sehr gut zu Weihnachten.
The snow effect is by far the most realistic version we’ve seen and was easy to integrate on the site.The configuration options are vast making it highly customisable.
7. Häufig gestellte Fragen
Die Auslieferung deiner Bestellung erfolgt in der Regel sofort (innerhalb weniger Minuten).
Ja, du kannst den Effekt so oft du möchtest mit Hilfe des Schnee Konfigurators anpassen.
Du kannst mit PayPal, Kreditkarte, Lastschrift und Sofortüberweisung bezahlen.
Es kann vorkommen, dass z.B. die Firewall eine E-Mail (mit Anhang) blockt und du somit die Lizenzdatei oder das Plugin nicht erhältst. Bitte informiere uns dann umgehend, gerne schicken wir dir die Daten erneut.