Realistic Raindrops On Glass Effect Using JavaScript – rainyday.js

Category: Animation , Javascript | March 29, 2021
Author: mubaidr
Views Total: 115 views
Official Page: Go to website
Last Update: March 29, 2021
License: MIT

Preview:

Realistic Raindrops On Glass Effect Using JavaScript – rainyday.js

Description:

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();

You Might Be Interested In:


Leave a Reply