Sneeuwscript

javascript voor vallende sneeuwvlokjes op je webpagina

photo: © CSShunter

Wat moet je doen?

Voor de dwarrelende sneeuwvlokjes in elk geval:

  1. Het javascript-bestand downloaden: snowscript.js (rechtsklik, opslaan)
  2. Het plaatje van het sneeuwvlokje downloaden: snowflake.png
  3. Het script en het plaatje uploaden naar de map van je pagina.
  4. Onderaan in de code van de pagina('s) waar de sneeuw
    moet komen, vlak voor het eind het regeltje intikken:
...
<script type="text/javascript" src="snowscript.js"></script>
</body>
</html>

Klaar! - Meer pagina's? Kan!

Sneeuw ook op andere pagina's

Dezelfde sneeuw op alle pagina's van de site? Geen enkel probleem!
Het script en het sneeuwvlokje zijn er dan al, daar hoeft niets mee te gebeuren.

Op een andere pagina een andere sneeuwsnelheid? Kan ook, zie "Verschillende soorten".


Kunnen ook andere dingen
naar beneden zweven? JA!

klik!

Verschillende
soorten?  JA!

klik!

Meer info? JA!

klik!

Wat kan je doen?

De instellingen van het script staan goed voor de sneeuwvlokjes zoals op deze pagina:
daar hoeft niets aan veranderd te worden. Maar als je wilt, kan je het javascript openen
(bv. in Kladblok) om dingen anders in te stellen.
Bovenaan in het script zijn instelbaar:

Het script zelf kan ook in een andere map gezet worden:

stop sneeuw

alleen voor
deze demo:
opnieuw

Je kunt een stopknop toevoegen, zodat de bezoekers de sneeuw uit kunnen zetten als ze genoeg hebben gezien.
Dan komen er bovenaan geen nieuwe vlokjes meer bij en dwarrelen de bestaande sneeuwvlokjes naar beneden, tot ze allemaal zijn verdwenen.

De sneeuwvlokjes doen het 't mooiste op een donkere pagina zoals deze.

Maar de sneeuwvlokjes doen het ook bij een lichte pagina-achtergrond.

Andere dingen laten zweven!

Je kan met hetzelfde script en een andere afbeelding ook andere dingen naar beneden laten zweven!

  • Bijvoorbeeld paaseieren in de paastijd (klik), of parachutes (klik), of een plaatje met een tekst (klik), of een bepaalde foto, of noem maar op.
  • Nodig: een andere afbeelding, en verder volg je hetzelfde recept.
  • Als de andere afbeelding geen rechthoek is maar ronde of grillige vormen heeft, dan zweeft dit het mooist over de achtergrond als je transparant maakt wat buiten de vorm valt.

Over dit maaksel

Uitgangspunt en inspiratiebron was een script uit 2006 van Vidar Larsen.

Nu, 6 jaar later, heeft dat script een aantal onvolkomenheden:

  • Het is verouderd en voldoet niet aan de standaarden, waardoor de meeste huidige browsers het niet doen als op de pagina een geldig "Doctype" wordt gebruikt.
  • Bij smalle pagina's en bij hoge pagina's zie je de verticale en horizontale scrollbalk steeds groeien en krimpen, wat afleidt van de pagina; en de scrollbars zijn minder makkelijk te bedienen (zie: het origineel in een kleiner window).

Andere dingen die zijn aangepast:

  • Verwijderd: verplichte opgave van de maten van de zweef-afbeelding; dit is niet meer nodig, het script zoekt dat zelf uit.
  • Toegevoegd: instel-mogelijkheid om het aantal te veranderen.
  • Toegevoegd: instel-mogelijkheid om de snelheid te veranderen.
  • Toegevoegd: instel-mogelijkheid voor wel / niet herhalen.
  • Toegevoegd: instel-mogelijkheid voor wisselende formaten of alleen de ware grootte van de afbeelding.
  • Toegevoegd: mogelijkheid voor de bezoeker om de sneeuw uit te zetten.
  • Toegevoegd: dezelfde afbeelding wordt gebruikt om automatisch grotere en kleinere sneeuwvlokjes te maken: er is maar één sneeuwvlokje-image!
  • Toegevoegd: bij het openen van de pagina is er eerst even niets, zodat de bezoeker niet geconfronteerd wordt met een pagina die al in beweging is.
  • Toegevoegd: nieuwe sneeuwvlokjes komen zachtjes onder de bovenrand van de pagina vandaan i.p.v. ineens tevoorschijn te ploppen.
  • Toegevoegd: in het begin dwarrelt de sneeuw niet zo hard; langzaam komen er steeds meer sneeuwvlokjes, en gaan ze sneller vallen.
  • Toegevoegd: bij een minder hoge pagina houd de sneeuw niet op waar de paginahoogte eindigt, maar blijft doorvallen tot onderaan het scherm.
  • Toegevoegd: onderaan de pagina spatten de vlokjes niet opeens uit elkaar, maar smelten ze zachtjes weg.
  • Toegevoegd: voorziening dat het script niet eventuele andere javascripts op de pagina kan uitschakelen.
  • Veranderd: minder grof sneeuwvlokje gemaakt, met verloop naar transparant.
  • Het script doet het in Firefox, Chrome, Opera, Safari en Internet Explorer 7. Volgens Browsershots doen Internet Explorer 8 en 9 het ook (nog niet zelf getest).

Al met al is het script toch maar 12 kB groot. Het sneeuwvlokje weegt 1.2 kB.

  • De download-snelheid van de pagina wordt hierdoor nauwelijks beinvloed.
  • NB: dit script werkt volledig zelfstandig. Er is geen bijbehorend CSS-stylesheet, en er zijn geen javascript-bibliotheken als jQuery e.d. voor nodig.

Beperkingen

Dit script zal op de meeste pagina's geen problemen opleveren. Maar het is geen universeel script dat zonder meer voor elke pagina-opmaak geschikt is. Een webpagina kan op duizenden verschillende manieren zijn gemaakt, en soms kan het nodig zijn om het script en/of de HTML en/of de CSS van de pagina aan te passen.

  • Dit kan met name het geval zijn bij sites die op een CMS als Joomla of Wordpress draaien, of als een template met complexe CSS wordt gebruikt, of als er overvloedig gebruik gemaakt wordt van andere javascripts.
  • Soms kan het bv. voor Internet Explorer nodig zijn om de links op een pagina een {position:relative} te geven. En op deze pagina's heeft IE7 wat kuren: als een sneeuwvlokje of iets anders bij de linker-zijkant van de pagina zweeft, kan het gebeuren dat het opeens verdwijnt, en na het passeren van een onzichtbare grens weer tevoorschijn floept(!). Andere browsers, die beter de standaarden volgen, hebben daar totaal geen last van.

Het script vraag nogal veel processor-kracht: er moeten heel veel dingen tegelijkertijd uitgerekend worden om een serie sneeuwvlokjes of andere dingen mooi naar beneden te laten komen. Misschien kan dat soms problemen voor de browser opleveren.

  • Dit zou kunnen gebeuren bij oude pc's, wanneer een bezoeker tegelijk veel andere programma's aan heeft staan die ook veel rekenkracht van de processor vragen. Maar met een Stop-knop op de pagina kan de bezoeker het vallen ook uitschakelen als het niet goed gaat.
  • In ieder geval is aan te raden om nieuwe pagina's van de site niet in een nieuw browser-tabblad te laten openen, als op de nieuwe pagina ook het sneeuwscript staat: dan moet er twee sneeuwbuien tegelijk door de processor, dus twee keer zoveel werk.
  • Een nieuwe pagina laten openen in hetzelfde venster/tabblad is geen probleem: dan wordt het script van de oude pagina uitgezet als die pagina er niet meer is.

Het script is qua code misschien niet altijd even handig. Dat komt ervan als je doorborduurt op andermans werk!

Andere voorstelling op andere pagina's

Je kunt ook meer sneeuw op de ene dan op de andere pagina laten vallen, of op een andere pagina de sneeuw sneller laten vallen.
Of: op de ene pagina sneeuwvlokjes, op een andere pagina kerstbomen die naar beneden komen. En op weer een andere pagina: bakstenen, raceauto's, medaillons, piano's, vliegende tapijten, enz. enz.
Ook dat kan met dit script, met een kleine aanpassing. Dat pak je als volgt aan:


  • Je maakt een kopie van het script, en noemt dat bv.:
    snowscript-aangepast.js
  • In deze versie schakel je de instellingen uit door commentaar-streepjes // voor de vijf variabelen te zetten.
    Het wordt dus nu:
    /* ++++++++++++++++++++++++++++ instellingen / settings to use ++++++++++++++++++++++++++++ */
    
       // hoe het vallend image heet, en waar het gevonden kan worden / image name and source: 
       // var imgSrc="snowflake.png";
    
       // aantal vallende voorwerpen: (aanbevolen maximum/suggested maximum: 20;)
       // var amount=20;
    
       // snelheid van het vallen:  ( 1 = langzaam/slow; 100 = snel/fast)
       // var velocity=20;
    	
       // herhalen na eerste serie: ( 1 = ja/yes; 0 = alleen één keer/only once)
       // var repeat=1;     
    
       // wisselen van formaat:     ( 1 = ja/yes; 0 = alleen ware grootte/only true format)
       // var sizing=1;     
    
    /* ++++++++++++++++++++++++++++ niets meer te doen / nothing to do ++++++++++++++++++++++++ */
    

Vervolgens komen de instellingen op alle pagina's apart, dan kan je ze per pagina anders instellen.

  • Op alle pagina's zet je dan een klein extra stukje javascript, vlak voor de verwijzing naar het aangepaste script.
    Dat ziet er als volgt uit:
    ...
    <script type="text/javascript">
        //<![CDATA[
        // instellingen vallende voorwerpen:
        var imgSrc="images/..." // vindplaats plaatje
        var amount=..;          // aantal voorwerpen
        var velocity=..;        // valsnelheid (1-100)
        var repeat=..;          // 1=herhalen, 0=niet herhalen
        var sizing=..;          // 1=wisselend formaat, 0=ware grootte
        //]]>
    </script>
    
    <script type="text/javascript" src="snowscript-aangepast.js"></script>
    </body>
    </html>

Zo kan iedere pagina apart zijn eigen afbeelding en andere instellingen krijgen.
PS: voorzichtig met de valsnelheid van eieren!

  Veel plezier ermee! CSShunter, dec. 2012