水の表現

$(selector).ripples();

var ripple = new RippleEffect({
    parent: document.querySelector('.my-div'),
    intensity: 1,
    strength: 2,
    area: 4,
    waveSpeed: 0.001,
    speedIn: 2,
    speedOut: 1.5,
    easing: 'Expo.easeInOut',
    hover: true,
    texture: './img/my-img.jpg',
});

var image = document.getElementById('background');
image.onload = function () {
    var engine = new RainyDay({
        image: this
    });
    engine.rain([
        [1, 2, 8000]
    ]);
    engine.rain([
        [3, 3, 0.88],
        [5, 5, 0.9],
        [6, 2, 1]
    ], 100);
};

// For Vanilla JavaScript
var myWave = wavify( document.querySelector('#myId'), {
  height: 60,
  bones: 3,
  amplitude: 40,
  color: 'rgba(150, 97, 255, .8)',
  speed: .25
})

// For jQuery
var myWave = $('#myID').wavify({
  height: 60,
  bones: 3,
  amplitude: 40,
  color: 'rgba(150, 97, 255, .8)',
  speed: .25
});

$.ripple({
  ".material": {},
  ".material.circle": {maxDiameter: "100%"},
  ".customHTML": {template: $("<p/>").text("Custom ripple content!")},
  ".callback": {
    callback: function($container, $ripple, posI, maxDiameter) {
      //is called whenever the ripple's css properties change
    }
  }
});