Sneeuwbui met jQuery

Zoals je ziet sneeuwt het hier een beetje. De vlokken zijn alleen niet wit, maar rood of zwart. Dat is omdat de achtergrond een lichte kleur heeft, waardoor je witte sneeuwvlokken bijna niet kunt zien.

Na ca. 20 seconden stopt de sneeuwbui. Dat is gedaan om deze bladzijde beter leesbaar te maken.

De sneeuwbui wordt gemaakt met een jQuery-plug-in. Op deze pagina doe ik uit de doeken hoe je dat aanpakt.

• Besproken worden:
  1. De oorsprong van het script.
  2. De werking van het script, in globale termen.
  3. Inbouwen in je eigen site.
   
• De oorsprong van het script
• Het script is gemaakt door Lazarevic Ivan, die het presenteert op zijn website workshop.rs. De pagina met script zelf vind je hier.
• Er is ook een demo-pagina, waar je het script ziet werken met witte sneeuw­vlokken (op een donkere achtergrond).
• Het beschrijving op workshop.rs is niet helemaal correct. Het oorspronkelijke script heeft ook een foutje. Beide zijn hier gecorrigeerd. De door mij aangepaste/bewerkte versie kun je hier downloaden.
   
• De werking van het script
• Dit script is een jQuery-plug-in. Behalve het script heb je dus ook jQuery nodig, minimaal versie 1.7.1. Dit kun je het beste van een CDN halen. Hier is Google Apis ingezet.
• Het script zelf bestaat uit twee delen:
  
  • Een JavaScript-bestand met de naam jquery.snow.js. Dit hoeft niet te worden aangepast.
  • Een JavaScriptje dat de sneeuwbui instelt en start.
  Plaatjes en HTML komen er niet aan te pas.
   
• Bij het starten van de sneeuwbui wordt er om de zoveel tijd een tag gemaakt: <div class='flake'>. Deze wordt bovenaan de pagina, buiten beeld geplaatst. Daarbij worden de hoogte en de breedte van het document bepaald.
• Elk van deze <div>-tags bevat één sneeuwvlok.
• Voor de eigenschappen van elke sneeuwvlok ligt de default-waarde vast in een JSON-object. De eigenschappen kun je zelf veranderen in de aanroep van de function die de sneeuwbui laat starten.
• De werking van het script is goed instelbaar: Aantal kleuren en de kleuren zelf, afmetingen van de vlokken, aantal vlokken op het scherm (Lees: hoe hard het sneeuwt), duur van de sneeuwbui, enz. Zie de tabel hieronder.
• Elke <div>-tag (lees: sneeuwvlok) beweegt met een constante snelheid naar beneden. Er is geen zijdelingse verplaatsing; de vlokken 'dwarrelen' dus niet.
   
• Inbouwen in je eigen site
• Dit script is een jQuery-plug-in. Je moet dus eerst jQuery laden, daarna het script voor de sneeuwbui.
• Helemaal onderaan je webdocument, net voor de </body>-tag, roep je $.fn.snow() aan.
• Als parameter kun je een JSON-object meegeven, maar dat hoeft niet. Je gebruikt het JSON-object om de sneeuwbui aan te passen aan je eigen wensen. Als je het object weglaat worden de default-instellingen gebruikt.
• De mogelijke instellingen staan in onderstaande tabel.
   

  Naam		Betekenis
  flakeChar		Karakter dat de sneeuwvlok voorstelt. Dit mag meer dan één karakter zijn. Het staat tussen aanhalingstekens. Default: "❄" (❄). Wijzigen raad ik niet aan.
  minSize		Kleinste karaktergrootte dat het script mag gebruiken, dit is een getal. Default: 10.
  maxSize		Grootste karaktergrootte dat het script mag gebruiken, dit is een getal. Default: 20.
  newOn		Tijd (in milliseconden) dat het script wacht alvorens een nieuwe sneeuwvlok te maken. Dit is een getal > 0. Hoe kleiner het getal hoe meer vlokken er worden gemaakt, dus hoe harder het sneeuwt. Default: 500.
  flakeColor		Kleuren van de sneeuwvlokken. Dit is een array met geldige HTML-kleurencodes of -namen, waar het script per sneeuw­vlok willekeurig uit kiest. Deze array mag leeg zijn, dan neemt het script zwart. Als je deze parameter weglaat is de default wit. Op de website met het oorspronkelijke script staat dit fout aangegeven.
  durationMillis		Tijd dat het script loopt, in milliseconden. Dit is een getal >: 0. Als je hiervoor 120000 opgeeft, houdt het na 120 seconden (= 2 minuten) vanzelf op met sneeuwen. Default: null. Dit betekent hier: oneindig doorlopend, de sneeuw stopt niet uit zichzelf. In het oorspronkelijke script werkt dat niet. Hier is het gecorrigeerd.

   

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="jquery.snow.js"></script>

(Zet dit aan het einde van de <BODY>, dus net voor de </body>-tag).

<script>
$(document).ready( function(){
  $.fn.snow({ flakeColor : ['black', 'red'], durationMillis : 20000 });
});
</script>

Downloaden:
 
Druk op de knop:  File: voorb070.zip, 1529 bytes.

Opmerking:
 
Dit is heel geschikt voor websites over winterse onderwerpen, zoals skiën, Kerst of de Jaarwisseling.