Realistic Raindrops On Glass Effect Using JavaScript – rainyday.js

rainyday.js is a JavaScript library to create a realistic ‘Raindrops On Frosted Glass’ effect using JavaScript and HTML5 canvas.

How to use it:

1. Import the rainyday.js library.

<script src=”rainyday.js”></script>

2. Create an empty image tag on which the library generates the raindrops effect.

<img id=”background” alt=”background” src=”” />

3. Apply the raindrops effect to your image.

function rain() {
  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);
  };
  image.crossOrigin = 'anonymous';
  image.src = 'bg.jpg';
}

rain();

4. All default options to customize the raindrops effect.

var engine = new RainyDay({
    // opacity from 0 to 1
    opacity: 1,
    // blur strength
    blur: 10,
    // crop the image
    crop: [0, 0, this.img.naturalWidth, this.img.naturalHeight],
    // update canvas on window resize
    enableSizeChange: true,
    // parent element
    parentElement: sourceParent,
    // FPS
    fps: 24,
    // fill style
    fillStyle: '#8ED6FF',
    // enable/disable collisions
    enableCollisions: true,
    // gravity options
    gravityThreshold: 3,
    gravityAngle: Math.PI / 2,
    gravityAngleVariance: 0,
    // raindrop reflection options
    reflectionScaledownFactor: 5,
    reflectionDropMappingWidth: 200,
    reflectionDropMappingHeight: 200,
    // width/height of the canvas
    width: sourceParent.clientWidth,
    height: sourceParent.clientHeight,
    // CSS position options
    position: 'absolute',
    top: parentOffset.top + 'px',
    left: parentOffset.left + 'px'
    
});

5. API methods.

// Start the rain engine
engine.rainyDay.rain([[minDropSize, maxDropSize, delay], [minDropSize, maxDropSize, delay], [minDropSize, maxDropSize, delay]]);
// Pause the animation
engine.pause();
// Resume the animation
engine.resume();
// Destroy the instance
engine.destroy();