Recommendation
More Effects...
JS
1
$(window).bind('load', function () {
2
    const raf = function (entry) {
3
        window.requestAnimationFrame(entry);
4
    };
5
    const random = function (min, max) {
6
        max = max + 1;
7
        return Math.floor(Math.random() * (max - min) + min);
8
    }
9
    var app = {
10
        init: function () {
11
            this.cacheDOM();
12
            this.style();
13
        },
14
        cacheDOM: function () {
15
            this.container = $('#container');
16
            this.images = $('img');
17
 
18
            this.mouseX = null;
19
            this.mouseY = null;
20
        },
21
        style: function () {
22
            this.images.imagesLoaded(function () {
23
                $(window).resize(function initial() {
24
                    TweenMax.set(app.container, {
25
                        opacity: 1
26
                    });
27
                    return initial;
28
                }());
29
            });
30
        },
31
        cursorEvents: function (e) {
32
            app.mouseX = e.clientX;
33
            app.mouseY = e.clientY;
34
        }
35
    }
36
 
37
    app.init();
38
 
39
    var cContainer = $('#c-container'),
40
        c = document.getElementById('c'),
41
        c2Container = $('#c2-container'),
42
        c2 = document.getElementById('c2'),
43
        cx = c.getContext('2d'),
44
        c2x = c2.getContext('2d'),
45
        particleIndex = 0,
46
        particles = {},
47
        particleNum = 1,
48
        particlesLoaded = false,
49
        Particle,
50
        Particle2,
51
        canvas,
52
        canvas2;
53
 
54
    c.width = $('#c').outerWidth();
55
    c.height = $('#c').outerHeight();
56
 
57
    c2.width = $('#c2').outerWidth();
58
    c2.height = $('#c2').outerHeight();
59
 
60
    //INITIAL CANVAS DRAW
61
    cx.fillStyle = 'rgba(0,0,0,1)';
62
    cx.fillRect(0, 0, c.width, c.height);
63
    c2x.fillStyle = 'rgba(0,0,0,1)';
64
    c2x.fillRect(0, 0, c2.width, c2.height);
65
 
66
    function particleFactory(thisCanvas, thisContext, thisParticleName, thisCanvasFunction) {
67
 
68
        var particleIndex = 0,
69
            particles = {},
70
            particleNum = 2,
71
            particlesLoaded = false;
72
 
73
        thisParticleName = function () {
74
            this.r = 8;
75
            this.rStart = this.r;
76
            this.rIncrement = this.r * -0.01;
77
            this.x = thisCanvas.width / 2;
78
            this.y = thisCanvas.height / 2;
79
            this.originTriggered = false;
80
            this.vx = random(-5, 5);
81
            this.vy = random(-10, 10);
82
            this.opacityLimit = 1;
83
            this.opacity = 1;
84
            this.opacityIncrement = 0.05;
85
            this.opacityReversing = false;
86
            this.gravity = 1;
87
            this.framerate = 0;
88
            this.framerateCounter = this.framerate;
89
            this.counter = 0;
90
            particleIndex++;
91
            particles[particleIndex] = this;
92
            this.id = particleIndex;
93
            this.life = 0;
94
            this.maxLife = random(0, 100);
95
            this.hue = random(30, 60);
96
            this.light = random(50, 100);
97
            this.color = `hsla(${this.hue},100%,${this.light}%,${this.opacity})`;
98
            this.duration = 60;
99
            this.durationTotal = this.duration + this.opacityLimit * 10;
100
            this.durationCounter = 0;
101
        }
102
 
103
        thisParticleName.prototype.draw = function () {
104
 
105
            if ((!this.originTriggered) && (app.mouseX != null)) {
106
                this.originTriggered = true;
107
                this.x = app.mouseX;
108
                this.y = app.mouseY;
109
            }
110
            this.color = `hsla(${this.hue},100%,${this.light}%,${this.opacity})`;
111
            thisContext.fillStyle = this.color;
112
            thisContext.beginPath();
113
            thisContext.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
114
            thisContext.fill();
115
 
116
            //START DRAW OPERATION
117
            this.r += this.rIncrement;
118
            this.x += this.vx;
119
            this.y += this.vy;
120
            this.durationCounter++;
121
            if (this.vx === 0) {
122
                this.vx++;
123
            }
124
            if (this.vy === 0) {
125
                this.vy++;
126
            }
127
            if (this.y > thisCanvas.height - this.rStart) {
128
                this.vx *= 0.5;
129
                this.vy *= -0.5;
130
                this.y = thisCanvas.height - this.rStart;
131
            }
132
            this.vy += this.gravity;
133
            if ((this.r <= 0)) {
134
                delete particles[this.id];
135
            }
136
            this.life++;
137
            //END DRAW OPERATION
138
        }
139
 
140
        thisCanvasFunction = function () {
141
            thisContext.globalCompositeOperation = 'source-over';
142
            thisContext.fillStyle = 'rgba(0,0,0,1)';
143
            thisContext.fillRect(0, 0, thisCanvas.width, thisCanvas.height);
144
            if (!particlesLoaded) {
145
                for (var i = 0; i < particleNum; i++) {
146
                    new thisParticleName();
147
                }
148
            }
149
            thisContext.globalCompositeOperation = 'lighter';
150
            for (var i in particles) {
151
                particles[i].draw();
152
            }
153
        }
154
        setInterval(thisCanvasFunction, 15);
155
    }
156
 
157
    $(window).resize(function initial() {
158
        window.addEventListener('mousemove', app.cursorEvents, false);
159
 
160
        c.width = $('#c').outerWidth();
161
        c.height = $('#c').outerHeight();
162
 
163
        c2.width = $('#c2').outerWidth();
164
        c2.height = $('#c2').outerHeight();
165
 
166
        return initial;
167
    }());
168
 
169
    particleFactory(c, cx, Particle, canvas);
170
    particleFactory(c2, c2x, Particle2, canvas2);
171
 
172
    TweenMax.set(c2Container, {
173
        transformOrigin: 'center bottom',
174
        scaleY: -1,
175
        opacity: 1
176
    });
177
 
178
    TweenMax.set(c2, {
179
        filter: 'blur(10px)'
180
    });
181
});
 
CSS
1
@import 'https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i';
2
 
3
body,
4
html {
5
    margin: 0;
6
    padding: 0;
7
    font-family: 'Lato', sans-serif;
8
    background-color: black;
9
    overflow: hidden;
10
}
11
 
12
h1,
13
h2,
14
h3,
15
h4,
16
h5,
17
h6,
18
p,
19
a,
20
li {
21
    margin: 0;
22
    padding: 0;
23
}
24
 
25
#container {
26
    width: 100vw;
27
    height: 100vh;
28
    position: relative;
29
    float: left;
30
    opacity: 0;
31
}
32
 
33
#c-container,
34
#c2-container {
35
    width: 100vw;
36
    height: 80vh;
37
    position: absolute;
38
    top: 0;
39
    left: 0;
40
}
41
 
42
canvas {
43
    width: 100%;
44
    height: 100%;
45
    position: absolute;
46
    top: 0;
47
    left: 0;
48
}
 
HTML
1
    <div id="container">
2
        <div id="c-container">
3
            <canvas id="c">Sorry.</canvas>
4
        </div>
5
        <div id="c2-container">
6
            <canvas id="c2">Sorry.</canvas>
7
        </div>
8
 
9
    </div>
10
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js"></script>
11
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
12
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
13
<script src="http://bennettcodes.com/js/imagesloaded.pkgd.min.js"></script>
 

Join Effecthub.com

Working with Global Gaming Artists and Developers!


Or Sign Up with Your Email Address:
This field must contain a valid email
Password should be at least 1 character