Sneeuwbuien en Ballonnen
Op deze bladzijde stijgen ballonnen omhoog. Of zijn het emoticons? Whatever.
Als je HIER klikt wordt de pagina opnieuw geladen en begint het te sneeuwen.
De sneeuw en de ballonnen worden geregeld door twee stukjes JavaScript die heel veel op elkaar lijken en die daarom in één keer worden besproken.
De code staat onderaan deze bladzijde. Je kunt hem ook downloaden, inclusief de plaatjes.
- De code van de ballonnen staat in de file ballon.js. De code van de sneeuw staat in de file sneeuw.js.
- Het oorspronkelijke script, gemaakt door ene Altan, voorzag alleen in ballonnen. De versie met sneeuw is een aanpassing daarvan.
- De code in de files ballon.js en sneeuw.js moet worden aangepast, en wel als volgt:
Ballonnen Sneeuw Betekenis var no var no Aantal figuren dat beweegt var speed var speed Snelheid waarmee de figuren bewegen. Een lager getal is een hogere snelheid. balloon[.] snow[.] De gebruikte figuren worden opgeslagen in een array.
Elk element van de array bevat een filenaam. Filenamen mogen gelijk zijn. Het eerste element heeft volgnummer 0, daarna 1, 2, enz. Volgnummers moeten een aaneengesloten reeks vormen.var maxballoon var maxsnow Hoogste volgnummer in de array. Als je bijvoorbeeld 6 ballonnen gebruikt, bestaat balloon[5]. Dan is maxballoon = 5. - Verder aanpassen van de code is niet nodig.
- De sneeuw en de ballonnen worden alleen aangemaakt in het deel van het document dat zichtbaar is op het scherm als het document wordt geopend. Dat betekent dat je in een lang document de plaatjes weg kunt scrollen.
Gebruik:
- De code staat "ergens" in de <BODY>, bij voorkeur aan het begin.
- Je start de animatie van de ballonnen met onload="doBalloon()". Neem dit op in de <body>-tag.
- Je start de animatie van de sneeuw met onload="doSnow()". Ook dit staat in de <body>-tag.
- Let op: Je kunt maar één van deze scripts tegelijkertijd in één HTML-document gebruiken. Merk op dat een pagina met (inline-)frames meerdere HTML-documenten bevat.
(Voor de sneeuw)
<script src="sneeuw.js"></script>(Voor de ballonnen)
<script src="ballon.js"></script>
Downloaden:
Druk op de knop:
File: voorb032.zip, 4238 bytes.
Opmerking:
Dit soort scripts vraagt vrij veel rekenkracht. Maak daarom het aantal plaatjes niet te groot. Een aantal van 15 is wel het
maximum om een vloeiende beweging te houden. Dat geldt zeker bij wat oudere of lichtere hardware. Zorg ook dat de plaatjes
niet over elkaar heen gaan vallen.
Ook hier geldt: Wees voorzichtig met de toepassing. Grote plaatjes die steeds over de tekst heen schuiven maakt het lastig
om de tekst te lezen! Dit soort zaken is eigenlijk meer geschikt als blikvanger in een klein venster of op een start-pagina.
