EffectHub.com: your best source for gaming

Recommendation

More Effects...

window.onload = function() {

var container = document.createElement('div');
		container.id = 'container';

document.body.appendChild(container);

var	nextL = container;
	var	nextR = container;

for (var i = 0; i < 15; i++) {
		var jointL = document.createElement('div');
			jointL.className = 'layer'+i+'L joint';
			jointL.style.marginLeft = '-30px';
			jointL.style.setProperty('animation', 'rotateR 2.5s ease-in-out '+(i/20)+'s infinite');
			jointL.style.setProperty('-moz-animation', 'rotateR 2.5s ease-in-out '+(i/20)+'s infinite');
			jointL.style.setProperty('-webkit-animation', 'rotateR 2.5s ease-in-out '+(i/20)+'s infinite');
			jointL.style.backgroundColor = 'rgba('+(200-i*12)+', '+(255-i*10)+', '+(255-i*10)+', 1)';

var jointR = document.createElement('div');
			jointR.className = 'layer'+i+'R joint';
		if (i == 0) {
			jointR.style.marginLeft = '0px';
		} else {
			jointR.style.marginLeft = '30px';
		}
			jointR.style.setProperty('animation', 'rotate 2.5s ease-in-out '+(i/20)+'s infinite');
			jointR.style.setProperty('-moz-animation', 'rotate 2.5s ease-in-out '+(i/20)+'s infinite');
			jointR.style.setProperty('-webkit-animation', 'rotate 2.5s ease-in-out '+(i/20)+'s infinite');
			jointR.style.animationDelay = (i/20)+'s';
			jointR.style.backgroundColor = 'rgba('+(200-i*12)+', '+(255-i*10)+', '+(255-i*10)+', 1)';

nextL.appendChild(jointL);
		nextR.appendChild(jointR);
		nextL = jointL;
		nextR = jointR;
	};

}

CSS

html, body {
	margin: 0;
	background: #191919;
}

#container {
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	width: 0px;
	height: 0px;
	animation: moveY 2.5s ease-in-out 0.7s infinite;
	-moz-animation: moveY 2.5s ease-in-out 0.7s infinite;
	-webkit-animation: moveY 2.5s ease-in-out 0.7s infinite;
}

.joint {
	position: absolute;
	display: inline-block;
	width: 40px;
	height: 2px;
	background: #e5e5e5;
}

@keyframes rotate {
	0% {
		transform: rotate(6.5deg);
	}
	50% {
		transform: rotate(-6.5deg);
	}
	100% {
		transform: rotate(6.5deg);
	}
}
@-moz-keyframes rotate {
	0% {
		-moz-transform: rotate(6.5deg);
	}
	50% {
		-moz-transform: rotate(-6.5deg);
	}
	100% {
		-moz-transform: rotate(6.5deg);
	}
}
@-webkit-keyframes rotate {
	0% {
		-webkit-transform: rotate(6.5deg);
	}
	50% {
		-webkit-transform: rotate(-6.5deg);
	}
	100% {
		-webkit-transform: rotate(6.5deg);
	}
}
@keyframes rotateR {
	0% {
		transform: rotate(-6.5deg);
	}
	50% {
		transform: rotate(6.5deg);
	}
	100% {
		transform: rotate(-6.5deg);
	}
}
@-moz-keyframes rotateR {
	0% {
		-moz-transform: rotate(-6.5deg);
	}
	50% {
		-moz-transform: rotate(6.5deg);
	}
	100% {
		-moz-transform: rotate(-6.5deg);
	}
}
@-webkit-keyframes rotateR {
	0% {
		-webkit-transform: rotate(-6.5deg);
	}
	50% {
		-webkit-transform: rotate(6.5deg);
	}
	100% {
		-webkit-transform: rotate(-6.5deg);
	}
}
@keyframes moveY {
	0% {
		transform: translateY(-80px);
	}
	50% {
		transform: translateY(80px);
	}
	100% {
		transform: translateY(-80px);
	}
}
@-moz-keyframes moveY {
	0% {
		-moz-transform: translateY(-80px);
	}
	50% {
		-moz-transform: translateY(80px);
	}
	100% {
		-moz-transform: translateY(-80px);
	}
}
@-webkit-keyframes moveY {
	0% {
		-webkit-transform: translateY(-80px);
	}
	50% {
		-webkit-transform: translateY(80px);
	}
	100% {
		-webkit-transform: translateY(-80px);
	}
}

HTML

Recommendation

Join Effecthub.com