EffectHub.com: your best source for gaming

Recommendation

More Effects...

$(window).bind('load', function () {
    const raf = function (entry) {
        window.requestAnimationFrame(entry);
    };
    const random = function (min, max) {
        max = max + 1;
        return Math.floor(Math.random() * (max - min) + min);
    }
    var app = {
        init: function () {
            this.cacheDOM();
            this.style();
        },
        cacheDOM: function () {
            this.container = $('#container');
            this.images = $('img');

this.mouseX = null;
            this.mouseY = null;
        },
        style: function () {
            this.images.imagesLoaded(function () {
                $(window).resize(function initial() {
                    TweenMax.set(app.container, {
                        opacity: 1
                    });
                    return initial;
                }());
            });
        },
        cursorEvents: function (e) {
            app.mouseX = e.clientX;
            app.mouseY = e.clientY;
        }
    }

app.init();

var cContainer = $('#c-container'),
        c = document.getElementById('c'),
        c2Container = $('#c2-container'),
        c2 = document.getElementById('c2'),
        cx = c.getContext('2d'),
        c2x = c2.getContext('2d'),
        particleIndex = 0,
        particles = {},
        particleNum = 1,
        particlesLoaded = false,
        Particle,
        Particle2,
        canvas,
        canvas2;

c.width = $('#c').outerWidth();
    c.height = $('#c').outerHeight();

c2.width = $('#c2').outerWidth();
    c2.height = $('#c2').outerHeight();

//INITIAL CANVAS DRAW
    cx.fillStyle = 'rgba(0,0,0,1)';
    cx.fillRect(0, 0, c.width, c.height);
    c2x.fillStyle = 'rgba(0,0,0,1)';
    c2x.fillRect(0, 0, c2.width, c2.height);

function particleFactory(thisCanvas, thisContext, thisParticleName, thisCanvasFunction) {

var particleIndex = 0,
            particles = {},
            particleNum = 2,
            particlesLoaded = false;

thisParticleName = function () {
            this.r = 8;
            this.rStart = this.r;
            this.rIncrement = this.r * -0.01;
            this.x = thisCanvas.width / 2;
            this.y = thisCanvas.height / 2;
            this.originTriggered = false;
            this.vx = random(-5, 5);
            this.vy = random(-10, 10);
            this.opacityLimit = 1;
            this.opacity = 1;
            this.opacityIncrement = 0.05;
            this.opacityReversing = false;
            this.gravity = 1;
            this.framerate = 0;
            this.framerateCounter = this.framerate;
            this.counter = 0;
            particleIndex++;
            particles[particleIndex] = this;
            this.id = particleIndex;
            this.life = 0;
            this.maxLife = random(0, 100);
            this.hue = random(30, 60);
            this.light = random(50, 100);
            this.color = `hsla(${this.hue},100%,${this.light}%,${this.opacity})`;
            this.duration = 60;
            this.durationTotal = this.duration + this.opacityLimit * 10;
            this.durationCounter = 0;
        }

thisParticleName.prototype.draw = function () {

if ((!this.originTriggered) && (app.mouseX != null)) {
                this.originTriggered = true;
                this.x = app.mouseX;
                this.y = app.mouseY;
            }
            this.color = `hsla(${this.hue},100%,${this.light}%,${this.opacity})`;
            thisContext.fillStyle = this.color;
            thisContext.beginPath();
            thisContext.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
            thisContext.fill();

//START DRAW OPERATION
            this.r += this.rIncrement;
            this.x += this.vx;
            this.y += this.vy;
            this.durationCounter++;
            if (this.vx === 0) {
                this.vx++;
            }
            if (this.vy === 0) {
                this.vy++;
            }
            if (this.y > thisCanvas.height - this.rStart) {
                this.vx *= 0.5;
                this.vy *= -0.5;
                this.y = thisCanvas.height - this.rStart;
            }
            this.vy += this.gravity;
            if ((this.r <= 0)) {
                delete particles[this.id];
            }
            this.life++;
            //END DRAW OPERATION
        }

thisCanvasFunction = function () {
            thisContext.globalCompositeOperation = 'source-over';
            thisContext.fillStyle = 'rgba(0,0,0,1)';
            thisContext.fillRect(0, 0, thisCanvas.width, thisCanvas.height);
            if (!particlesLoaded) {
                for (var i = 0; i < particleNum; i++) {
                    new thisParticleName();
                }
            }
            thisContext.globalCompositeOperation = 'lighter';
            for (var i in particles) {
                particles[i].draw();
            }
        }
        setInterval(thisCanvasFunction, 15);
    }

$(window).resize(function initial() {
        window.addEventListener('mousemove', app.cursorEvents, false);

c.width = $('#c').outerWidth();
        c.height = $('#c').outerHeight();

c2.width = $('#c2').outerWidth();
        c2.height = $('#c2').outerHeight();

return initial;
    }());

particleFactory(c, cx, Particle, canvas);
    particleFactory(c2, c2x, Particle2, canvas2);

TweenMax.set(c2Container, {
        transformOrigin: 'center bottom',
        scaleY: -1,
        opacity: 1
    });

TweenMax.set(c2, {
        filter: 'blur(10px)'
    });
});

CSS

HTML

Recommendation

Join Effecthub.com