JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

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

CSS

body {
    overflow: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
}
img {
    width: 100%;
    height: 100%;
}

JavaScript

window.onload = function () {
    run();
}

function run() {
    var image = document.getElementById('background');
    image.onload = function () {
        var engine = new RainyDay({
            image: this
        });
        engine.rain([
            [0, 2, 5], // Поиграйтесь с этими значениями
            [1, 1, 2] // И с этими тоже :)
        ], 500);
    };
    image.crossOrigin = 'anonymous';
    image.src = 'http://i.imgur.com/OVQkDRE.jpg';
}

function RainyDay(options, canvas) {

    if (this === window) { //if *this* is the window object, start over with a *new* object
        return new RainyDay(options, canvas);
    }

    this.img = options.image;
    var defaults = {
        opacity: 1,
        blur: 10,
        crop: [0, 0, this.img.naturalWidth, this.img.naturalHeight],
        enableSizeChange: true,
        parentElement: document.getElementsByTagName('body')[0],
        fps: 30,
        fillStyle: '#8ED6FF',
        enableCollisions: true,
        gravityThreshold: 3,
        gravityAngle: Math.PI / 2,
        gravityAngleVariance: 0,
        reflectionScaledownFactor: 5,
        reflectionDropMappingWidth: 200,
        reflectionDropMappingHeight: 200,
        width: this.img.clientWidth,
        height: this.img.clientHeight,
        position: 'absolute',
        top: 0,
        left: 0
    };

    // add the defaults to options
    for (var option in defaults) {
        if (typeof options[option] === 'undefined') {
            options[option] = defaults[option];
        }
    }
    this.options = options;

    this.drops = [];

    // prepare canvas elements
    this.canvas = canvas || this.prepareCanvas();
    this.prepareBackground();
    this.prepareGlass();

    // assume defaults
    this.reflection = this.REFLECTION_MINIATURE;
    this.trail = this.TRAIL_DROPS;
    this.gravity = this.GRAVITY_NON_LINEAR;
    this.collision = this.COLLISION_SIMPLE;

    // set polyfill of requestAnimationFrame
    this.setRequestAnimFrame();
}

/**
 *...