mywebsite/client/assets/js/bubble.js

var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;

// Main
export function bubble() {
    initHeader();
    addListeners();
}

function initHeader() {
    width = window.innerWidth;
    height = 500;
    target = {
        x: 0,
        y: height
    };

    largeHeader = document.getElementById('header');
    largeHeader.style.height = height + 'px';

    canvas = document.getElementById('canvas');
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext('2d');

    // create particles
    circles = [];
    for (var x = 0; x < width * 0.5; x++) {
        var c = new Circle();
        circles.push(c);
    }
    animate();
}

// Event handling
function addListeners() {
    window.addEventListener('scroll', scrollCheck);
    window.addEventListener('resize', resize);
}

function scrollCheck() {
    if (document.body.scrollTop > height) animateHeader = false;
    else animateHeader = true;
}

function resize() {
    width = window.innerWidth;
    height = 500;
    largeHeader.style.height = height + 'px';
    canvas.width = width;
    canvas.height = height;
}

function animate() {
    if (animateHeader) {
        ctx.clearRect(0, 0, width, height);
        for (var i in circles) {
            circles[i].draw();
        }
    }
    requestAnimationFrame(animate);
}

// Canvas manipulation
function Circle() {
    var _this = this;

    // constructor
    (function() {
        _this.pos = {};
        init();
    })();

    function init() {
        _this.pos.x = Math.random() * width;
        _this.pos.y = height + Math.random() * 100;
        _this.alpha = 0.1 + Math.random() * 0.3;
        _this.scale = 0.1 + Math.random() * 0.3;
        _this.velocity = Math.random();
    }

    this.draw = function() {
        if (_this.alpha <= 0) {
            init();
        }
        _this.pos.y -= _this.velocity;
        _this.alpha -= 0.0005;
        ctx.beginPath();
        ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 10, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'rgba(255,255,255,' + _this.alpha + ')';
        ctx.fill();
    };
}