Animated Background

animated-background.markdown

Animated Background

Full-page background made with JavaScript and Canvas: the animation follows movement on non-touch devices

Based on: http://tympanus.net/Development/AnimatedHeaderBackgrounds/

A Pen by Jason on CodePen.

License.

index.markdown

Charm Capital LLC

script.js

var canvasDots = function () {
	var canvas = document.querySelector("canvas"),
		ctx = canvas.getContext("2d"),
		colorDot = "#CECECE",
		color = "#CECECE";
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	canvas.style.display = "block";
	ctx.fillStyle = colorDot;
	ctx.lineWidth = 0.1;
	ctx.strokeStyle = color;

	var mousePosition = {
		x: (30 * canvas.width) / 100,
		y: (30 * canvas.height) / 100
	};

	var dots = {
		nb: 600,
		distance: 60,
		d_radius: 100,
		array: []
	};

	function Dot() {
		this.x = Math.random() * canvas.width;
		this.y = Math.random() * canvas.height;

		this.vx = -0.5 + Math.random();
		this.vy = -0.5 + Math.random();

		this.radius = Math.random();
	}

	Dot.prototype = {
		create: function () {
			ctx.beginPath();
			ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
			ctx.fill();
		},

		animate: function () {
			for (i = 0; i < dots.nb; i++) {
				var dot = dots.array[i];

				if (dot.y < 0 || dot.y > canvas.height) {
					dot.vx = dot.vx;
					dot.vy = -dot.vy;
				} else if (dot.x < 0 || dot.x > canvas.width) {
					dot.vx = -dot.vx;
					dot.vy = dot.vy;
				}
				dot.x += dot.vx;
				dot.y += dot.vy;
			}
		},

		line: function () {
			for (i = 0; i < dots.nb; i++) {
				for (j = 0; j < dots.nb; j++) {
					i_dot = dots.array[i];
					j_dot = dots.array[j];

					if (
						i_dot.x - j_dot.x < dots.distance &&
						i_dot.y - j_dot.y < dots.distance &&
						i_dot.x - j_dot.x > -dots.distance &&
						i_dot.y - j_dot.y > -dots.distance
					) {
						if (
							i_dot.x - mousePosition.x < dots.d_radius &&
							i_dot.y - mousePosition.y < dots.d_radius &&
							i_dot.x - mousePosition.x > -dots.d_radius &&
							i_dot.y - mousePosition.y > -dots.d_radius
						) {
							ctx.beginPath();
							ctx.moveTo(i_dot.x, i_dot.y);
							ctx.lineTo(j_dot.x, j_dot.y);
							ctx.stroke();
							ctx.closePath();
						}
					}
				}
			}
		}
	};

	function createDots() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		for (i = 0; i < dots.nb; i++) {
			dots.array.push(new Dot());
			dot = dots.array[i];

			dot.create();
		}

		dot.line();
		dot.animate();
	}

	window.onmousemove = function (parameter) {
		mousePosition.x = parameter.pageX;
		mousePosition.y = parameter.pageY;
	};

	mousePosition.x = window.innerWidth / 2;
	mousePosition.y = window.innerHeight / 2;

	setInterval(createDots, 1000 / 30);
};

window.onload = function () {
	canvasDots();
};

scripts

<script src="https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/EasePack.min.js"></script>
<script src="https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/rAF.js"></script>
<script src="https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/TweenLite.min.js"></script>

style.stylus

/* Header */
.large-header {
	position: relative;
	width: 100%;
	background: #333;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	z-index: 1;
}

#large-header {
	background-image: url('https://images.unsplash.com/photo-1610644386436-75da5c5c9a18?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85');
}

.main-title {
	position: absolute;
	margin: 0;
	padding: 0;
	color: #f9f1e9;
	text-align: center;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

.demo-1 .main-title {
	text-transform: uppercase;
	font-size: 4.2em;
	letter-spacing: 0.1em;
}

.main-title .normal {
	font-weight: 450;
}

.main-title .thin {
	font-weight: 200;
  
}

@media only screen and (max-width : 768px) {
	.demo-1 .main-title {
		font-size: 3em;
	}
}

styles

<link href="https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/css/demo.css" rel="stylesheet" />