Regeneffect met jQuery

Hieronder zie je een blok, verdeeld in twee kleuren. De lichtblauwe kleur lijkt op een wateroppervlak, waarin regendruppels vallen. De golven op het oppervlak verspreiden zich in twee richtingen.

Dit is heel geschikt als onderdeel van de vormgeving van een website. De golven (die je heel subtiel kunt maken) trekken de aandacht van de bezoekers van je site.
Op deze pagina wordt uitgelegd hoe je dit maakt. De code van de voorbeelden kun je downloaden om zelf te gebruiken.

• Er worden twee items besproken:
  1. De werking van het script, in algemene termen.
  2. Inbouwen in je eigen site.
   
• De werking van het script
• Het originele script is te vinden op Github. Het is ontwikkeld door Daniella Harel en Greg McAusland.
  Deze pagina is een bewerking en vertaling van de laatstgenoemde site.
• Het script zit in de file raindrops.js. Die hoef je niet aan te passen om zelf te gebruiken. Het is een jQuery-toepassing.
• De algoritmes achter de berekeningen van de golven zijn nogal ingewikkeld. Bespreking daarvan blijft daarom achterwege.
   
• Het werkt niet helemaal lekker op Android apparaten. Daar is er vaak een soort spleet te zien aan de rechterkant van het effect.
   
• Om dit op het scherm te krijgen maak je een rechthoek met behulp van een <div>. Die heeft een uniek id en een class. Voor het voorbeeld is gebruikt:
  <div class="blok" id="demo1"></div>
• De class is nodig om de rechthoek op te maken. Dat wil zeggen: De achtergrondkleur en de tekst. In het voorbeeld is de achtergrond donkerblauw en is de tekst wit, 12px hoog en vet. De kleur van het water wordt gemaakt door raindrops.js.
• De id is nodig om aan de <div> te refereren, zodat het regen-effect er in kan worden gemaakt.
   
• Het regen-effect wordt gestart met de JavaScript-opdracht:
  jQuery('#demo1').raindrops();
• In bovenstaande opdracht worden alleen default-waarden gebruikt. Dat is te zien aan de parameterljst: die is leeg. De verschijningsvorm van de golven en het water kunnen echter worden aangepast aan je eigen smaak. De nodige instellingen geef je mee als object in JSON-notatie.
• De volgende zaken kun je instellen:
  

  Naam		Betekenis
  color		Kleur van het water. Elke geldige kleur-aanduiding is mogelijk. Default: '#00aeef'
  waveLength		Golflengte. Dit is een getal. Hoe hoger het is, hoe korter de golven. Default: 340.
  frequency		Frequentie waarmee de regendruppels vallen. Een hoger getal is meer regendruppels. Default: 3.
  waveHeight		Golfhoogte. Een hoger getal betekent hogere golven. Default: 100.
  density		Dichtheid van het water. Een hoger getal betekent kortere rimpels op het wateroppervlak. Default: 0.02.
  rippleSpeed		Snelheid van het rimpel-effect. Een hoger getal betekent snellere rimpels. Default: 0.1.
  canvasWidth		Breedte van het wateroppervlak. Dit is een percentage van de volle breedte van de <div> waarin het effect wordt getoond. Default: 100%.
  canvasHeight		Waterhoogte. Dit is een percentage van de hoogte van de <div> waarin het effect wordt getoond. Default: 50%.
  rightPadding		Hulpmiddel om ongewenste 'spleten' in de animatie te voorkomen. Default: 20. (Dit gebruik je alleen als het nodig is)
  position		CSS-position van het <canvas>-element. Default: 'absolute'.
  positionBottom		CSS-position van het <canvas>-element. Default: bottom: 0.
  positionLeft		CSS-position van het <canvas>-element. Default: left: 0.

   
• Het onderstaande voorbeeld is gemaakt met de aanroep:
  jQuery('#demo2').raindrops({ color:'teal', frequency:5,
rippleSpeed:.05, density:.01 });

• De code van dit voorbeeld staat in de downloadfile.
   
• Inbouwen in je eigen site
• Om te beginnen: Je hebt jQuery nodig met de plugin jQuery-UI. Die betrek je het beste van een CDN. In het voorbeeld is de CDN van jQuery zelf gebruikt, maar elke andere CDN die jQuery aanbiedt is goed.
  Daarachter zet je raindrops.js.
• De volgorde is belangrijk: Eerst jQuery zelf, daarna jQuery-UI en daarna raindrops.js.
   
• Maak een rechthoek met behulp van een <div>. Geef die een klasse, die je opmaakt met CSS. In het eerste voorbeeld op deze pagina heeft een breedte van 100% en een hoogte van 100px. Je kunt de breedte net zo groot maken als je zelf wilt. Het blok in het tweede voorbeeld is 400px breed.
  De hoogte moet je opgeven in absolute eenheden zoals px, de breedte mag ook in relatieve eenheden zoals %.
   
• Zet de <div>-tags met de blokken neer op de plaats waar ze in het document moeten verschijnen. Uitlijnen doe je met een <div>-tag die de <div>'s met de blokken omsluit.

Gebruik:

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

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

<style>
.blok {
  box-sizing:border-box;
  width:100%; height:100px;
  padding:15px; margin:10px auto;
  background-color:#34495E;
  color:#fff; text-align:center;
  font-size:12px; font-weight:bold;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="raindrops.js"></script>

(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen).

<div class="blok" id="demo1"></div>
<script>
  jQuery('#demo1').raindrops();
</script>

Downloaden:
 
Druk op de knop:  File: voorb505.zip, 1999 bytes.

Opmerking:
 
Ook hier geldt: kies het effect met zorg. Te veel beweging maakt de pagina al gauw onrustig. Vergelijk de twee voorbeelden maar eens met elkaar. Het tweede voorbeeld heeft eigenlijk al te veel beweging!