confetti.js

confetti.js

// @see https://getgrav.org/blog/grav-1.2-released
jQuery(document).ready(function() {
    var NUM_CONFETTI = 75,
        COLORS = [
            [85, 71, 106],
            [174, 61, 99],
            [219, 56, 83],
            [244, 92, 68],
            [248, 182, 70]
        ],
        PI_2 = 2 * Math.PI,
        canvas = document.getElementById('confetti'),
        context = canvas.getContext('2d'),
        width = 0,
        height = 0;
    var rAF = (function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(callback) {
            window.setTimeout(callback, 1000 / 60)
        }
    }());
    var opacify = function(val, min, max) {
        if (val < min || val > max) {
            return 0
        }
        return Math.abs(val === min ? 1 : (val - max) / (min - max))
    };
    var decouple = function(element, event, callback) {
        var evt, tracking = !1;
        element = element[0] || element;
        var capture = function(e) {
            evt = e;
            track()
        };
        var track = function() {
            if (!tracking) {
                rAF(update);
                tracking = !0
            }
        };
        var update = function() {
            callback.call(element, evt);
            tracking = !1
        };
        try {
            element.addEventListener(event, capture, !1)
        } catch (e) {}
        return capture
    };
    var resizeWindow = function() {
        width = canvas.width = window.innerWidth;
        height = canvas.height = window.innerHeight
    };
    var scrollWindow = function(e) {
        $(canvas).css('opacity', opacify(window.scrollY, 0, height))
    }
    decouple(window, 'resize', resizeWindow);
    decouple(window, 'scroll', scrollWindow);
    setTimeout(resizeWindow, 0);
    var range = function(a, b) {
        return (b - a) * Math.random() + a
    };
    var drawCircle = function(x, y, r, style) {
        context.beginPath();
        context.arc(x, y, r, 0, PI_2, !1);
        context.fillStyle = style;
        return context.fill()
    };
    var xpos = 0.5;
    $(document).on('mousemove', function(e) {
        return xpos = e.pageX / width
    });
    window.requestAnimationFrame = (function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
            return window.setTimeout(callback, 1000 / 60)
        }
    })();
    var Confetti = (function() {
        function Confetti() {
            this.style = COLORS[~~range(0, 5)];
            this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2];
            this.r = ~~range(2, 6);
            this.r2 = 2 * this.r;
            this.replace()
        }
        Confetti.prototype.replace = function() {
            this.opacity = 0;
            this.dop = 0.03 * range(1, 4);
            this.x = range(-this.r2, width - this.r2);
            this.y = range(-20, height - this.r2);
            this.xmax = width - this.r;
            this.ymax = height - this.r;
            this.vx = range(0, 2) + 8 * xpos - 5;
            return this.vy = 0.7 * this.r + range(-1, 1)
        };
        Confetti.prototype.draw = function() {
            var ref;
            this.x += this.vx;
            this.y += this.vy;
            this.opacity += this.dop;
            if (this.opacity > 1) {
                this.opacity = 1;
                this.dop *= -1
            }
            if (this.opacity < 0 || this.y > this.ymax) {
                this.replace()
            }
            if (!((0 < (ref = this.x) && ref < this.xmax))) {
                this.x = (this.x + this.xmax) % this.xmax
            }
            return drawCircle(~~this.x, ~~this.y, this.r, this.rgb + "," + this.opacity + ")")
        };
        return Confetti
    })();
    var confetti = (function() {
        var j, ref, results, i;
        results = [];
        for (i = j = 1, ref = NUM_CONFETTI; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
            results.push(new Confetti)
        }
        return results
    })();
    window.step = function() {
        var c, j, len, results;
        requestAnimationFrame(step);
        context.clearRect(0, 0, width, height);
        results = [];
        for (j = 0, len = confetti.length; j < len; j++) {
            c = confetti[j];
            results.push(c.draw())
        }
        return results
    };
    step()
})