Beautiful circle animations

For today, I have prepared an awesome CSS animation that is sure to brighten up your website. So we are gonna be building rotating circles with circles on the side and squares in middle…….wait what??

Here see it in action.

It’s always good to remove all the ambiguity from the tutorial. So I would take this time to mention the directory tree I will be using through out the tutorial.


/
-> style 
   - base.css
-> script 
   - animation.js
- index.html

let’s gear up.

Starting With HTML

first of all we will need a holder to hold everything.
so,

</pre>
<article class="holder"></article>
<pre>

and voila! we are done with the HTML part. Easy right?

Building the mind with Javascript

We will be building all the circles and squares inside the javascript. Open or create animation.js inside script directory.
Let’s define some constants first.


var classes = ["one", "two", "three", "four", "five", "six", "seven", "eight"],
	holder_big= document.createElement('div'),
	holder_small= document.createElement('div'),
	holder_central= document.createElement('div'),
	holder;

Let’s define some methods we will be needing shortly.


function createBigCircle() {
	var div = document.createElement('div');
	div.className ="big circle";
	return div;
}

This method will represent a big circles denoted by the “big” and “circle” classes. We will define them in CSS. The method for smaller circles will be almost exactly the same.


function createSmallCircle() {
	var div = document.createElement('div');
	div.className ="small circle";
	return div;
}

For Squares we will be using class “square”.


function createSmallSquare() {
	var div = document.createElement('div');
	div.className ="small square";
	return div;
}

function createCentralSquare() {
	var div = document.createElement('div');
	div.className ="biggest square";
	return div;
}

Now that we have defined all the basic methods we will need, Let’s move on to the onLoad method.
Initialize the holder.


window.onload = function() {
	holder = document.getElementsByClassName('holder')[0];
	...

Now we will need to separate the “big circles” from the “small circles and squares” and “central squares”. So, give a holder for each of them and append it to the holder.


	...
	holder_big.className = "big-circles";
	holder_small.className = "small-circles";
	holder_central.className = "big-squares";

	holder.appendChild(holder_big);
	holder.appendChild(holder_small);
	holder.appendChild(holder_central);
	...

In javascript, To show animation we use combination of setTimeout() and transitions in CSS. So we will define a method to let us animate the elements easily. This method adds a class to the element after 200ms.


function animate(div, classname) {
	setTimeout(function() {
		div.className += " " + classname;
		div.style.opacity = 1;
	}, 200);
}

Add eight of the big circles to the big-circles div inside the onload().


	...
	for(i = 0; i < 8; i++) {
		var child = createBigCircle();
		holder_big.appendChild(child);
		animate(child, classes[i]);
	}
	...

Now we want the four small circles and four small squares to appear after some delay so we will again use setTimeout(). We will append small circles and squares alternatively after 2 seconds.


	...
	setTimeout(function() {
		for(i = 0; i < 8; i++) {
			var child;
			if(i % 2 == 0)
				child = createSmallCircle();
			else
				child = createSmallSquare();

			holder_small.appendChild(child);
			child.className += " " + classes[i];
			child.style.opacity = 1;
		}
	}, 2000);
	...

Finally We will add the two bigger squares in the center after a delay of 10 seconds.


	...
	setTimeout(function() {
		for(i = 0 ; i < 2 ; i++){
			var child = createCentralSquare();
			holder_central.appendChild(child);
			animate(child, classes[i]);
		}
	}, 10000);
}

Complete javascript code


var classes = ["one", "two", "three", "four", "five", "six", "seven", "eight"];

var holder_big= document.createElement('div'),
	holder_small= document.createElement('div'),
	holder_central= document.createElement('div'),
	holder;

window.onload = function() {
	holder = document.getElementsByClassName('holder')[0];

	holder_big.className = "big-circles";
	holder_small.className = "small-circles";
	holder_central.className = "big-squares";

	holder.appendChild(holder_big);
	holder.appendChild(holder_small);
	holder.appendChild(holder_central);

	for(i = 0; i < 8; i++) {
		var child = createBigCircle();
		holder_big.appendChild(child);
		animate(child, classes[i]);
	}

	setTimeout(function() {
		for(i = 0; i < 8; i++) {
			var child;
			if(i % 2 == 0)
				child = createSmallCircle();
			else
				child = createSmallSquare();

			holder_small.appendChild(child);
			child.className += " " + classes[i];
			child.style.opacity = 1;
		}
	}, 2000);

	setTimeout(function() {
		for(i = 0 ; i < 2 ; i++){
			var child = createCentralSquare();
			holder_central.appendChild(child);
			animate(child, classes[i]);
		}
	}, 10000);
}

function animate(div, classname) {
	setTimeout(function() {
		div.className += " " + classname;
		div.style.opacity = 1;
	}, 200);
}

function createBigCircle() {
	var div = document.createElement('div');
	div.className ="big circle";
	return div;
}

function createSmallCircle() {
	var div = document.createElement('div');
	div.className ="small circle";
	return div;
}

function createSmallSquare() {
	var div = document.createElement('div');
	div.className ="small square";
	return div;
}

function createCentralSquare() {
	var div = document.createElement('div');
	div.className ="biggest square";
	return div;
}

Making It Beautiful with CSS

As of now your website is working but it’s not pretty. Let’s pretty up a few things. We will start with the body.


body {
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	background: -webkit-linear-gradient(#CCC, #FFF);
}

Holder should be in the center of the screen so from rough estimation.


.holder {
	position: absolute;
	top: 20%;
	left: 30%;
	
}

The respective holders of big, small and central elements will rotate counter-clockwise slowly to add more dramatic effect.


.big-circles {
	width: 30em;
	height: 30em;
	position: absolute;
	animation: rotate 20s linear infinite;
}

.big-squares {
	width: 15em;
	height: 15em;
	position: absolute;
	top: 7.5em;
	left: 15em;
}

.small-circles {
	width: 35em;
	height: 35em;
	position: absolute;
	top: -2.5em;
	left: -2.5em;
	animation: rotate 40s linear infinite;
	
}

The animation “rotate” is defined as


@keyframes rotate {
	100% {
		transform-origin: 50% 50%;
		transform: rotateZ(-360deg);
	}
}

Let’s define a basic circle shape with “circle” class with transitions to match the setTimeout() and animation for fun.


.circle {
	border-radius: 50%;
	position: absolute;
	top: 0px;
	box-shadow: inset 0px 0px 5px #333;
	-webkit-transition: all 1s ease-in-out;
	opacity: 0;
	background: rgba(200,40,40,.7);
	animation: awesome 7s 1;
}

Square is defined the same.


.square {
	border-radius: 25%;
	position: absolute;
	top: 0px;
	box-shadow:  inset 0px 0px 5px #333;
	-webkit-transition: all 1s ease-in-out;
	opacity: 0;
	background: rgba(200,40,40,.7);
	animation: awesome 5s 1;
}

The “awesome” animation allows the elements to come up from the bottom of the screen and then rotate around and then allows the transition to allow the animations set by numbered classes.


@keyframes awesome {
	0% {
		top: 1500px;
	}

	20% {
		top: 0px;
	}
	20%, 30% {
		transform: translateX(-20px);
	}
	30%, 40% {
		transform: translateX(40px);
	}
	40%,50% {
		transform: translateX(-20px);
	}
	50%, 60% {
		transform-origin: 50% 50%;
		transform: rotateZ(0deg);
	}
	60%, 80% {
		transform: rotateZ(-360deg);
	}
}

Now classes for different size needs to do their job properly.


.big {
	width: 15em;
	height: 15em;
	left: calc(50% - 7.5em);
	transform-origin: 50% 15em;

}

.biggest {
	width: 15em;
	height: 15em;
	left: calc(50% - 15em);
	transform-origin: 50% 50%;

}

.small {
	width: 5em;
	height: 5em;
	left: calc(50% - 2.5em);
	transform-origin: 50% 17.5em;
}

The eight classes from one to eight style the elements to rotate around the center of the screen. That way each element needs to be exactly rotate 45deg from the current position. Also the circles needs to have different background with large alpha so as to give transperancy to the circles.


.one {
	background: rgba(204, 55 , 55, .7);
	transform: rotateZ(-45deg);
}

.two {
	background: rgba(176,00,181,.7);
	transform: rotateZ(-90deg);
}

.three {
	background: rgba(60,06,30,.7);
	transform: rotateZ(-135deg);
}

.four {
	background: rgba(11, 00, 11, .7);
	transform: rotateZ(-180deg);
}

.five {
	background: rgba(209, 29, 05);
	transform: rotateZ(-225deg);
}

.six {
	background: rgba(20,80,75,.7);
	transform: rotateZ(-270deg);
}

.seven {
	background: rgba(226,07,28,.7);
	transform: rotateZ(-315deg);
}

.eight {
	background: rgba(02,172,30,.7);
	transform: rotateZ(-360deg);
}

Finally we will focus on the big squares in the middle of the animation.


.big-squares .one {
	transform:rotateZ(0deg);
	animation: rotate 15s linear infinite;
	background: rgba(36,01,57,.7);       
}

.big-squares .two {
	transform: rotateZ(0deg);
	background: rgba(240,43,29,.3);
	
}

To add a personalized message on the second square, add a psuedo element.


.big-squares .two::after {
	content: "Ritesh Kukreja";
	display: block;
	position: absolute;
	top: 45%;
	text-align: center;
	color: #EEE;
	font-family: arial;
	font-size: 28px;
	width: 100%;
	text-shadow: 2px 2px #000000;
}

Complete CSS source code


body {
	overflow: hidden;
	width: 100%;
	height: 1500px;
	background: -webkit-linear-gradient(#CCC, #FFF);
}

.holder {
	position: absolute;
	top: 20%;
	left: 30%;
	
}

.big-circles {
	width: 30em;
	height: 30em;
	position: absolute;
	animation: rotate 20s linear infinite;
}

.big-squares {
	width: 15em;
	height: 15em;
	position: absolute;
	top: 7.5em;
	left: 15em;
}

.small-circles {
	width: 35em;
	height: 35em;
	position: absolute;
	top: -2.5em;
	left: -2.5em;
	animation: rotate 40s linear infinite;
	
}

@keyframes rotate {
	100% {
		transform-origin: 50% 50%;
		transform: rotateZ(-360deg);
	}
}

@keyframes awesome {
	0% {
		top: 1500px;
	}

	20% {
		top: 0px;
	}
	20%, 30% {
		transform: translateX(-20px);
	}
	30%, 40% {
		transform: translateX(40px);
	}
	40%,50% {
		transform: translateX(-20px);
	}
	50%, 60% {
		transform-origin: 50% 50%;
		transform: rotateZ(0deg);
	}
	60%, 80% {
		transform: rotateZ(-360deg);
	}
}

.circle {
	border-radius: 50%;
	position: absolute;
	top: 0px;
	box-shadow: inset 0px 0px 5px #333;
	-webkit-transition: all 1s ease-in-out;
	opacity: 0;
	background: rgba(200,40,40,.7);
	animation: awesome 7s 1;
}

.square {
	border-radius: 25%;
	position: absolute;
	top: 0px;
	box-shadow:  inset 0px 0px 5px #333;
	-webkit-transition: all 1s ease-in-out;
	opacity: 0;
	background: rgba(200,40,40,.7);
	animation: awesome 5s 1;
}

.big {
	width: 15em;
	height: 15em;
	left: calc(50% - 7.5em);
	transform-origin: 50% 15em;

}

.biggest {
	width: 15em;
	height: 15em;
	left: calc(50% - 15em);
	transform-origin: 50% 50%;

}

.small {
	width: 5em;
	height: 5em;
	left: calc(50% - 2.5em);
	transform-origin: 50% 17.5em;
}

.one {
	background: rgba(204, 55 , 55, .7);
	transform: rotateZ(-45deg);
}

.two {
	background: rgba(176,00,181,.7);
	transform: rotateZ(-90deg);
}

.three {
	background: rgba(60,06,30,.7);
	transform: rotateZ(-135deg);
}

.four {
	background: rgba(11, 00, 11, .7);
	transform: rotateZ(-180deg);
}

.five {
	background: rgba(209, 29, 05);
	transform: rotateZ(-225deg);
}

.six {
	background: rgba(20,80,75,.7);
	transform: rotateZ(-270deg);
}

.seven {
	background: rgba(226,07,28,.7);
	transform: rotateZ(-315deg);
}

.eight {
	background: rgba(02,172,30,.7);
	transform: rotateZ(-360deg);
}

.big-squares .one {
	transform:rotateZ(0deg);
	animation: rotate 15s linear infinite;
	background: rgba(36,01,57,.7);       
}

.big-squares .two {
	transform: rotateZ(0deg);
	background: rgba(240,43,29,.3);
	
}

.big-squares .two::after {
	content: "Ritesh Kukreja";
	display: block;
	position: absolute;
	top: 45%;
	text-align: center;
	color: #EEE;
	font-family: arial;
	font-size: 28px;
	width: 100%;
	text-shadow: 2px 2px #000000;
}

That’s it. Download the Source code from github.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s