Regendruppels op het raam
Hierboven zie je een foto van een meeuw op de nok van een dak. Het lijkt of de foto niet scherp is. Dat komt omdat het raam beslagen is. Bovendien regent het…
Dit prachtige effect is gemaakt behulp van JavaScript en het HTML <canvas>-element.
Hoewel het op deze site gebruikelijk is om dit soort scripts uitgebreid te analyseren en te beschrijven zodat je het zelf kunt gebruiken, wordt daar in dit geval vanaf gezien. Daarvoor is het script veel te ingewikkeld. Regendruppels op een raam, die ook nog eens samenvloeien en naar beneden lopen, zijn moeilijk te programmeren.
De oorsprong van het script
Het oorspronkelijke script is gemaakt door Maroslaw, alias Marek Brodziak. Inmiddels wordt is het overgenomen door Muhammad
Ubaid Raza alias Mmubaidr, die het beschikbaar stelt via GitHub.
Er is ook een aparte demo-site.
Het script wordt niet meer actief bijgehouden.
Het script gebruiken in je eigen site
Het inbouwen van het script in je website is niet echt eenvoudig. De documentatie is vrij summier, maar er worden wel vijf
goede demo's meegeleverd. Toch is dat niet voldoende om het "even" te doen. Er zijn wat voetangels en klemmen:
- Voor de afbeelding wordt een <img>-tag gebruikt zonder src-attribuut. Dat wordt er door de JavaScript-function run() in gezet.
- De <img>-tag moet het eerste element zijn na de <body>-tag. Als je dat niet doet verschijnt de achtergrond-foto twee keer in het document.
- Over de foto wordt een <canvas>-element gelegd, waarin de regendruppels worden getekend. De foto dient daarbij als achtergrond. Het <canvas>-element wordt 'hard' in de linker bovenhoek van het webdocument gezet. Dat kun je niet veranderen.
- Je kunt geen tekst boven of op de foto zetten (Met de CSS-eigenschap z-index lukt het ook niet).
- Als je een foto van een externe server wilt halen, in plaats van een foto van je eigen website, kan dat maar beperkt. De
vijf demo's doen dat wel en daar werkt het goed. Als ik echter een foto wil halen van mijn eigen
fotosite, stopt JavaScript met een security-error. De reden
daarvoor is mij niet duidelijk.
Voor dit item heb ik een foto uit mijn fotosite naar de server van deze website gekopieerd, om het werkend te krijgen.
- Het script vraagt nogal wat van de rekenkracht van je PC. Vooral oudere exemplaren kunnen daardoor erg traag gaan reageren.
Toepassingen
Het effect komt het beste tot zijn recht op een donkere foto met wat felle kleuren. Denk aan een drukke straat bij avond. Op
een foto met weinig kleur (zoals op deze bladzijde) gaat het ook goed.
Dit script is goed bruikbaar als voorblad van een website, zolang er geen tekst op de voorgrond hoeft te staan.
