Tipps und Tricks zu den Themen: Software- und Webentwicklung

Freitag, 29. November 2013

Free Snow Plugin (JavaScript + CSS3)

Passend zur Weihnachtszeit haben wir ein kleines Plugin erstellt, dass euch einen tollen Schnee-Effekt auf eure Internetseite zaubert. Das Plugin erfordert keinerlei externe Bibliotheken und ist weniger als 1kb groß!

Download CSS Source
Download JavaScript Source
Download JavaScript Minified (490 bytes gzipped)

Demo: Free Snow Plugin



1. Schritt: CSS Klasse

Das Plugin greift auf die vom Browser bereitgestellten CSS3-Features zurück. Dafür muss diese CSS-Klasse in eure Seite/Stylesheet eingebunden werden:
Alternativ kann diese CSS-Datei auch als externes Stylesheet eingebunden werden:

Download CSS Source


2. Schritt: JavaScript Plugin
Das JavaScript-Plugin muss ebenfalls in eure Seite eingebunden werden: Download JavaScript Source
Download JavaScript Minified (490 bytes gzipped)


3. Konfiguration & Start

Habt ihr den CSS-Teil sowie das JavaScript-Plugin wie oben beschrieben ordnungsgemäß eingebunden, könnt ihr das Plugin mit folgender JavaScript-Anweisung initialisieren und starten (unterhalb der Seite einfügen, optimal kurz vor dem schließenden BODY-Tag):
Der erste Übergabeparameter ist der HTML-Container in dem der Schnee-Effekt laufen soll (z.B. vom Typ "DIV" oder "SPAN"). Hat der gewünschte Container keine ID, muss diese entsprechend vergeben werden. Wichtig ist auch, dass der Funktions-Aufruf 'snowPlugin()' aus dem oberen Codeausschnitt, im Quelltext unterhalb des gewünschten Containers steht.

Der zweite Parameter gibt die maximale Anzahl an sichtbaren Schneeflocken an. Höhere Werte erfordern mehr Performance.


Zusammenfassung

Zusammengefasst sollte eure Code-Struktur jetzt in etwa so aussehen: Wir wünschen euch viel Spass mit dem Plugin und eine winterliche Internetzeit.



Keine Kommentare:

Kommentar veröffentlichen