Regendruppels op een waterplas als achtergrond

Hieronder zie je een foto van een roos. Die lijkt op/in water te drijven. Een simulatie van regendruppels en de kringen die daardoor in het water ontstaan versterkt de illusie.
Als je op een willekeurige plek in het document klikt ontstaan ook van die kringen.

Met de drie knoppen kun je het effect laten pauzeren, weer hervatten en helemaal uitschakelen. In het laatste geval verdwijnt de 'uitschakelen'-knop en kan het effect alleen weer worden ingeschakeld door de pagina te verversen.

Op deze bladzijde wordt beschreven hoe je zoiets maakt. De benodigde code is beschikbaar op GitHub.

Keyword Betekenis
(object) 
Maak een ripples-effect. Geef een aantal instellingen op in een object; de parameterlijst mag leeg zijn.
$(selector).ripples()
$(selector).ripples({
imageURL: ....., // string.
    Indien leeg dan wordt de achtergrond van het betreffende
    element gebruikt. default: leeg
dropRadius: ..., // float.
    Straal (in px) van de druppels die worden gemaakt. default:20
perturbance: .., // float.
    Mate van verstoring. Dit bepaalt de hoogte van de golf.
    Er is geen golf als dit nul is. default: 0.03
resolution: ..., // integer.
    Afmetingen van het blok waarin wordt door WebGL gerenderd.
    Hoe hoger dit getal, hoe mooier het effect en hoe trager de
    golf loopt. default: 256
interactive: .., // boolean.
    Bepaalt of muisklikken en -bewegingen het effect start. default: true
  })
drop 
Laat een druppel vallen op de plaats die wordt aangegeven door x en y. De druppel heeft een straal van radius en de amplitude (de golfhoogte van de kring) is strength:
$(selector).ripples('drop', x, y, radius, strength)
destroy 
Verwijder het effect van het element
$(selector).ripples('destroy')
Het effect zet je weer terug door het opnieuw op te bouwen. Dat doe je door een nieuw object op te bouwen.
hide /
show		 
Verberg of toon het effect.
$(selector).ripples('hide')
$(selector).ripples('show')
Gebruik dit in combinatie met 'pause' resp. 'play'.
pause /
play		 
Pauzeer het effect of laat het verder gaan.
$(selector).ripples('pause')
$(selector).ripples('play')
Gebruik dit in combinatie met 'hide' resp. 'show'.
set 
Verander een enkele waarde van het ripless()-object.
$(selector).ripples('set', name, value)
Voor name kun je gebruiken: dropRadius, perturbance, interactive en imageUrl. Voor value geef je de gewenste waarde op.
Het is, om begrijpelijke redenen, niet mogelijk om resolution aan te passen. Als je dat toch wilt, moet je een nieuw object maken.
updateSize 
Stel de afmetingen van het effect opnieuw in.
$(selector).ripples('updateSize')
Deze code moet je uitvoeren als de afmetingen het element, waarop het effect actief is, veranderen.

Gebruik:

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

<style>
body {
  overflow-x: hidden;
}
#roosje {
  background-image:url("foto.jpg");
  position:relative;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:560px;
  height:420px;
}
.error {
  font-weight:bold;
  color: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="jquery.ripples-min.js"></script>
<script>
$(document).ready(function() {
  try {
    $('body').ripples({
      resolution: 512,
      dropRadius: 20, //px
      perturbance: 0.04,
    });
    $('#roosje').ripples({
      resolution: 256,
      dropRadius: 10, //px
      perturbance: 0.004,
      interactive: false
    });
  }
  catch (e) {
    $('.error').show().text(e);
  }

  $('.js-ripples-disable').on('click', function() {
    $('#roosje').ripples('destroy');
    $(this).hide();
  });

  $('.js-ripples-play').on('click', function() {
    $('#roosje').ripples('play');
    $('#roosje').ripples('show');
  });

  $('.js-ripples-pause').on('click', function() {
    $('#roosje').ripples('pause');
    $('#roosje').ripples('hide');
  });

  // Automatic drops
  setInterval(function() {
    var $el = $('#roosje');
    var x = Math.random() * $el.outerWidth();
    var y = Math.random() * $el.outerHeight();
    var dropRadius = 10;
    var strength = 0.04 + Math.random() * 0.04;

    $el.ripples('drop', x, y, dropRadius, strength);
  }, 400);
});
</script>

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

<div id="roosje"></div>
<div style="text-align:center;margin:15px 0;">
<button class="js-ripples-pause"  type="button">Effect
  pauzeren</button>
<button class="js-ripples-play"  type="button">Effect
  hervatten</button>
<button class="js-ripples-disable"  type="button">Effect
  uitschakelen</button>
</div>
<div class="error"></div>

Downloaden:
 
Druk op de knop: Download deze code  File: voorb559.zip, 940 bytes.

 
terug

html-559; Laatste wijziging: 29 mei 2020