EffectHub.com: your best source for gaming

Recommendation

More Effects...

/* jshint esversion: 6 */
((main) => {

this.requestAnimationFrame = (() => {
		return window.requestAnimationFrame ||
			window.webkitRequestAnimationFrame ||
			window.mozRequestAnimationFrame ||
			window.oRequestAnimationFrame ||
			window.msRequestAnimationFrame ||
			function(callback) {
				window.setTimeout(callback, 1000 / 60);
			};
	})();

main(this, document, Vector2);

})((window, document, v2, undefined) => {

'use strict';

const PI = Math.PI,
		TAU = PI * 2;

const APP_DEFAULTS = {
		particleCount: 600,
		particleColor: 'rgba(200,200,230,0.5)'
	};

class Particle {
		constructor(size, speed, context, bounds, z) {
			this.size = size;
			this.ctx = context;
			this.bounds = bounds;
			this.z = z;
			this.position = new v2();
			this.position.randomize(bounds);
			this.velocity = new v2(0, speed);
			this.velocity.y -= Math.random();
		}

reset() {
			this.position.y = this.bounds.y + this.size;
			this.position.x = Math.random() * this.bounds.x;
		}

update() {
			this.position.add(this.velocity);
			if (this.position.y < -this.size || this.position.x < -this.size || this.position.x > this.bounds.x + this.size) {
				this.reset();
			}
		}
	}

class App {
		constructor() {
			this.setup();
			this.getCanvas();
			this.resize();
			this.populate();
			this.loop();
		}

setup() {
			let self = this;
			self.props = Object.assign({}, APP_DEFAULTS);
			self.dimensions = new v2();
			self.center = new v2();
			self.mouse = new v2();
			self.mouseOver = false;
			window.onresize = () => {
				self.resize();
			};
			window.onmousemove = (e) => {
				self.mouseHandler(e);
			};
			window.onmouseout = (e) => {
				self.mouseHandler(e);
			};
		}

mouseHandler(e) {
			this.mouse.x = e.clientX;
			this.mouse.y = e.clientY;
			if (e.type === 'mousemove') {
				this.mouseOver = true;
			}
			if (e.type === 'mouseout') {
				this.mouseOver = false;
			}
		}

getCanvas() {
			this.canvas = {
				back: document.querySelector('.back'),
				mid: document.querySelector('.mid'),
				front: document.querySelector('.front')
			};

this.ctx = {
				back: this.canvas.back.getContext('2d'),
				mid: this.canvas.mid.getContext('2d'),
				front: this.canvas.front.getContext('2d')
			};
		}

resize() {
			for (var c in this.canvas) {
				this.canvas[c].width = this.dimensions.x = window.innerWidth;
				this.canvas[c].height = this.dimensions.y = window.innerHeight;
			}
			this.center.x = this.dimensions.x * 0.5;
			this.center.y = this.dimensions.y * 0.5;
		}

populate() {
			this.particles = [];
			for (let i = 0; i < this.props.particleCount; i++) {
				let pCtx = i < 300 ? this.ctx.back : i < 500 ? this.ctx.mid : this.ctx.front,
					size = i < 300 ? 5 : i < 500 ? 8 : 12,
					speed = i < 300 ? -0.5 : i < 500 ? -1 : -2,
					z = i < 300 ? 1 : i < 500 ? 2 : 3,
					particle = new Particle(size, speed, pCtx, this.dimensions, z);
				this.particles.push(particle);
			}
		}

loop() {
			let self = this;
			self.render();
			window.requestAnimationFrame(self.loop.bind(self));
		}

render() {
			let mouseDist, vel;
			if (this.mouseOver) {
				mouseDist = (this.mouse.x - this.center.x)/this.center.x;
			}
			for (var c in this.ctx) {
				this.ctx[c].clearRect(0, 0, this.dimensions.x, this.dimensions.y);
			}
			for (let i = 0, len = this.particles.length; i < len; i++) {
				let p = this.particles[i];
				p.update();
				p.ctx.beginPath();
				p.ctx.fillStyle = this.props.particleColor;
				p.ctx.arc(p.position.x, p.position.y, p.size, 0, TAU);
				p.ctx.fill();
				p.ctx.closePath();
				if (this.mouseOver) {
					vel = new v2(mouseDist * p.z, p.velocity.y);
				} else {
					vel = new v2(0, p.velocity.y);
				}
				p.velocity.lerp(vel);
			}
		}
	}

window.onload = () => {
		let app = new App();
	};

});

CSS

body {
  background: #000000;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}

.back {
  z-index: 0;
  -webkit-filter: blur(6px);
          filter: blur(6px);
  background-image: -webkit-radial-gradient(#4682b4, #191970);
  background-image: radial-gradient(#4682b4, #191970);
}

.mid {
  z-index: 1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  mix-blend-mode: lighten;
  background: rgba(20, 20, 20, 0.5);
}

.front {
  z-index: 2;
  -webkit-filter: blur(1px);
          filter: blur(1px);
  mix-blend-mode: luminosity;
}

.codepen-link {
  position: absolute;
  bottom: 30px;
  right: 30px;
  height: 40px;
  width: 40px;
  z-index: 10;
  border-radius: 50%;
  box-sizing: border-box;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg");
  background-position: center center;
  background-size: cover;
  opacity: 0.5;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.codepen-link:hover {
  opacity: 0.8;
  box-shadow: 0 0 6px #efefef;
}

HTML

Recommendation

Join Effecthub.com