The Social Media Invasion

In this example below you will see how to do a The Social Media Invasion with some HTML / CSS and Javascript

Choose a year to see the growth of Facebook and Twitter users.This was my first project using jQuery and CSS keyframe animations.

Thumbnail
This awesome code was written by arjancodes, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright arjancodes ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>The Social Media Invasion</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='http://arjan-jassal.com/project2/css/fb-circles.css'>
<link rel='stylesheet prefetch' href='http://arjan-jassal.com/project2/css/tw-circles.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
	<div id="earth">
		<div id="circle-container">
			<!-- UK -->
			<div class="circle" id="fb-uk" title="">
			</div>
			<!-- USA -->
			<div class="circle" id="fb-usa" title="">
			</div>
			<!-- Canada -->
			<div class="circle" id="fb-can" title="">
			</div>
			<!-- China -->
			<div class="circle" id="fb-chin" title="">
			</div>
			<!-- India -->
			<div class="circle" id="fb-ind" title="">
			</div>
			<!-- France -->
			<div class="circle" id="fb-fr" title="">
			</div>
			<!-- Italy -->
			<div class="circle" id="fb-it" title="">
			</div>
			<!-- Brazil -->
			<div class="circle" id="fb-bra" title="">
			</div>
			<!-- Indonesia -->
			<div class="circle" id="fb-indo" title="">
			</div>
			<!-- Germany -->
			<div class="circle" id="fb-ger" title="">
			</div>
			<!-- South Africa -->
			<div class="circle" id="fb-safr" title="">
			</div>
			<!-- Turkey -->
			<div class="circle" id="fb-tur" title="">
			</div>
			<!-- Australia -->
			<div class="circle" id="fb-aus" title="">
			</div>
			<!-- Mexico -->
			<div class="circle" id="fb-mex" title="">
			</div>
			<!-- Japan -->
			<div class="circle" id="fb-jap" title="">
			</div>
			<!-- Egypt -->
			<div class="circle" id="fb-egy" title="">
			</div>
			<!-- Russia -->
			<div class="circle" id="fb-rus" title="">
			</div>
			<!-- Argentina -->
			<div class="circle" id="fb-arg" title="">
			</div>
			<!-- Phillipines -->
			<div class="circle" id="fb-phil" title="">
			</div>
			<!-- Malaysia -->
			<div class="circle" id="fb-mal" title="">
			</div>
			<!-- Thailand -->
			<div class="circle" id="fb-thai" title="">
			</div>
			<!-- S Korea -->
			<div class="circle" id="fb-skor" title="">
			</div>
			<!-- Taiwan -->
			<div class="circle" id="fb-tai" title="">
			</div>
			<!-- Columbia -->
			<div class="circle" id="fb-col" title="">
			</div>
			<!-- Peru -->
			<div class="circle" id="fb-peru" title="">
			</div>
			<!-- Venezuela -->
			<div class="circle" id="fb-ven" title="">
			</div>
			<!-- Equaduor -->
			<div class="circle" id="fb-equ" title="">
			</div>
			<!-- Chile -->
			<div class="circle" id="fb-chil" title="">
			</div>
			<!-- Nigeria -->
			<div class="circle" id="fb-nig" title="">
			</div>
			<!-- Morocco -->
			<div class="circle" id="fb-mor" title="">
			</div>
			<!-- Spain -->
			<div class="circle" id="fb-spa" title="">
			</div>
			<!-- Poland -->
			<div class="circle" id="fb-pol" title="">
			</div>
			<!-- Norway -->
			<div class="circle" id="fb-nor" title="">
			</div>
		</div> <!-- circle container -->
	</div> <!-- earth -->
	
	<div class="stars">
		<div class="star one"></div>
		<div class="star two"></div>
		<div class="star three"></div>
		<div class="star four"></div>
		<div class="star five"></div>
		<div class="star six"></div>
	</div>

	<header>
		<h1>The Social Media Invasion</h1>
		<p>
			Select a year to watch Facebook and Twitter take over the world.
		</p>
	</header>
	
	<ul id="menu">
		<li>
			<a class="button" href="#" id="fb-2009">2009 Facebook</a>
			<span></span>
			<a class="button" href="#" id="fb-2014">2014 Facebook</a>
		</li>	
		<li>
			<a class="button" href="#" id="tw-2009">2009 Twitter</a>
			<span></span> 
			<a class="button" href="#" id="tw-2014">2014 Twitter</a>
		</li>	
	</ul>

	<div class="clear"></div>
	<p>
		Hover over a circle for an exact number.
	</p>

	<div id="scale">
		<div id="scaleCircle"></div>
		<p>
			= 50 million users
		</p>
	</div>

	<p id="bonus">
		<strong>Bonus:</strong> Hover over a UFO to learn more!
	</p>
	<div id="starbackdrop"></div>
</body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://arjan-jassal.com/project2/js/socialmedia0.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/arjancodes/the-social-media-invasion-Gafel */
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Lobster);

body {
	padding: 20px 75px;
	background-color: #14101b;
	background-image: url('http://arjanjassal.com/social-media-invasion/img/stars.png');
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
  height: 1200px;
}

#starbackdrop {
	z-index: -1000;
	position: absolute;
	width: 100%;
	height: 800px;
	top: 0;
	left: 0;
	background-image: url('http://arjan-jassal.com/project2/img/snow1.png');
	background-size: 20%;
	-webkit-animation: bgstars 30s linear infinite;
	-moz-animation: bgstars 30s linear infinite;
}

@-webkit-keyframes bgstars {
	from { -webkit-transform:scale(1); }
	to { -webkit-transform:scale(.7); }
}

@-moz-keyframes bgstars {
	from { -moz-transform:scale(1); }
	to { -moz-transform:scale(.7); }
}

a {
	color: white;
	text-decoration: none;
}

h1 {
	color: #0dc7ff;
	font-family: 'Lobster';
	font-size: 48px;
}

header {
	padding: 15px 0;
}

header p {
	margin-top: 16px;
}

#earth {
	z-index: 200;
	float: right;
	overflow: hidden;
	margin: 15px auto;
	width:550px;
	height:550px;
	position: relative;
	border-radius: 50%;
	background: url('http://arjanjassal.com/social-media-invasion/img/globe.svg') center repeat-x;
	background-position: center;
	box-shadow: inset -15px -14px 150px 20px rgba(0,0,0,.5), inset 100px 110px 101px 9px rgba(255,255,255,.1); 

	-webkit-animation: rotate 70s linear infinite;
	-moz-animation: rotate 70s linear infinite;
}

#earth:hover, #earth:hover .circle {
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
}

@-webkit-keyframes rotate {
	from {background-position-x: -380px; }
	to {background-position-x: 900px; }
}
@-moz-keyframes rotate {
	from {background-position: -380px center; }
	to {background-position: 900px center; }
}

@-webkit-keyframes rotateCircle {
	from {left:-380px; }
	to {left:900px; }
}
@-moz-keyframes rotateCircle {
	from {left:-380px; }
	to {left:900px; }
}

.circle {
	position: absolute;
	border-radius: 50%;
	box-shadow: 0px 2px 1px rgba(0,0,0,.7);

	-webkit-animation: rotateCircle 70s linear infinite;
	-webkit-transition: all .4s ease-in-out;
	-moz-animation: rotateCircle 70s linear infinite;
	-moz-transition: all .4s ease-in-out;
}

.circle:hover {
	
}

.fbcircle {
	opacity: .85;
	padding: 2px;
	background: #3B5998;
}

.twcircle {
	opacity: .85;
	padding: 3px;
	background: #4099FF;
}

.circle:hover[title]:after { 
	content: attr(title); 
	position: absolute;
	top:0;
	right: 0;
	padding: 2px;
    white-space: nowrap;
    -webkit-transform:scale(1.3);
    -moz-transform:scale(1.3);
	background: tomato; 
}

.circle[title]:after {
	z-index: 1000;
}

ul#menu {
	float: left;
	margin:15px 0px 0 0px;
}

ul#menu li {
	position: relative;
	margin-bottom: 30px;
}

ul#menu li span {
	display: inline-block;
	width: 30px;
}

ul#menu li a.button {
	display: inline-block;
	text-align: center;
	width: 110px;
	color: #5d5d5d;
	background: white;
	border:0px solid white;
	border-radius: 10px 0px;
	padding: 10px 8px;

	-webkit-transition:all .3s linear;
	-moz-transition:all .3s linear;
}

.button-style {
	background:#0EDF61 !important;
	color:#fff !important;
}

#scale {
	float: left;
	margin:30px 0px 30px 0px;
	clear: left;
}

#scaleCircle {
	display: inline-block;
	float: left;
	padding: 25px;
	border-radius: 50%;
	background:white;
}

#scale p {
	line-height: 50px;
	margin-left: 9px;
	float: left;
}

#bonus {
	position: absolute;
	bottom: 15px;
	margin: 15px 0;
	font-size: 14px;
	padding: 6px;
	background:rgba(255,255,255,.15);
	border-radius: 4px;
	color:#fff;
}

.clear {clear: left;}

.stars { -webkit-transition: all .4s ease-in-out;}

.star {
	z-index: 100;
	position: absolute;
	border-radius:100%;
	box-shadow: inset 3px 3px 4px 3px rgba(255,255,255,.93);

	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
}

.star:nth-child(odd) {
	width: 200px;
	height: 200px;
	-webkit-transform:scale(.06);
	-moz-transform:scale(.06);
}

.star:nth-child(even) {
	width: 180px;
	height: 180px;
	-webkit-transform:scale(.08);
	-moz-transform:scale(.08);
}

.star:after {
	content: " ";
	display: block;
	margin: 115px 0 0 -100px;
	border-radius: 50%;
	box-shadow: 2px -4px 1px 2px white, inset -6px -12px 17px 4px rgba(0,0,0,.25);
	width: 400px;
	height:85px;
	background: #f9f9f9;
}

.star:nth-child(even):hover {
	z-index: 400;
	-webkit-animation-play-state:paused;
	-webkit-transform:scale(1);
	-webkit-transform:rotate(-10deg);

	-moz-animation-play-state:paused;
	-moz-transform:scale(1);
	-moz-transform:rotate(-10deg);
}

.star:nth-child(odd):hover {
	z-index: 400;
	-webkit-animation-play-state:paused;
	-webkit-transform:scale(1);
	-webkit-transform:rotate(10deg);

	-moz-animation-play-state:paused;
	-moz-transform:scale(1);
	-moz-transform:rotate(10deg);
}

.star.one {
	-webkit-animation: star1 30s linear infinite;
	-moz-animation: star1 20s linear infinite;
	background: rgba(255,255,255,.85) url('http://arjan-jassal.com/project2/img/star1.svg');
}

.star.two {
	-webkit-animation: star2 28s linear infinite;
	-moz-animation: star2 28s linear infinite;
	background: rgba(255,255,255,.85) url('http://arjan-jassal.com/project2/img/star2.svg');
}

.star.three {
	-webkit-animation: star3 32s linear infinite;
	-moz-animation: star3 22s linear infinite;
	background: rgba(255,255,255,.85) url('http://arjan-jassal.com/project2/img/star3.svg');
}

.star.four {
	-webkit-animation: star4 30s linear infinite;
	-moz-animation: star4 30s linear infinite;
	background: rgba(255,255,255,.85) url('http://arjan-jassal.com/project2/img/star4.svg');
}

.star.five {
	-webkit-animation: star5 30s linear infinite;
	-moz-animation: star5 30s linear infinite;
	background: rgba(255,255,255,.85) url('http://arjan-jassal.com/project2/img/star5.svg');
}

.star.six {
	-webkit-animation: star6 52s linear infinite;
	-moz-animation: star6 52s linear infinite;
	background: rgba(255,255,255,.85) url('http://arjan-jassal.com/project2/img/star6.svg');
}

@-webkit-keyframes star1 {
	0%   {top:200px; left:300px;}
	20%   {top:210px; left:360px;}
	40%  {top:220px; left:420px;}
	60%  {top:210px; left:360px;}
	100%  {top:200px; left:300px;}
}

@-webkit-keyframes star2 {
	0%   {top:85px; left:400px;}
	20%   {top:88px; left:470px;}
	40%  {top:95px; left:570px;}
	60%  {top:86px; left:470px;}
	100%  {top:85px; left:400px;}
}

@-webkit-keyframes star3 {
	0%   {top:400px; left:180px;}
	20%   {top:380px; left:240px;}
	40%  {top:370px; left:330px;}
	60%  {top:380px; left:240px;}
	100%  {top:400px; left:180px;}
}

@-webkit-keyframes star4 {
	0%   {top:320px; left:0px;}
	20%   {top:300px; left:50px;}
	40%  {top:290px; left:200px;}
	60%  {top:295px; left:50px;}
	100%  {top:320px; left:0px;}
}

@-webkit-keyframes star5 {
	0%   {top:300px; left:1000px;}
	20%   {top:290px; left:1150px;}
	40%  {top:270px; left:1200px;}
	60%  {top:295px; left:1150px;}
	100%  {top:300px; left:1000px;}
}

@-webkit-keyframes star6 {
	0%   {top:490px; left:900px;}
	20%   {top:440px; left:1100px;}
	40%  {top:420px; left:800px;}
	50%  {top:420px; left:400px;}
	70%  {top:410px; left:800px;}
	100%  {top:490px; left:900px;}
}

@-webkit-keyframes star7 {
	0%   {top:30px; left:970px;}
	20%   {top:60px; left:1150px;}
	40%  {top:40px; left:1280px;}
	60%  {top:70px; left:1100px;}
	100%  {top:30px; left:970px;}
}

@-moz-keyframes star1 {
	0%   {top:200px; left:300px;}
	20%   {top:210px; left:360px;}
	40%  {top:220px; left:420px;}
	60%  {top:210px; left:360px;}
	100%  {top:200px; left:300px;}
}

@-moz-keyframes star2 {
	0%   {top:85px; left:400px;}
	20%   {top:88px; left:470px;}
	40%  {top:95px; left:570px;}
	60%  {top:86px; left:470px;}
	100%  {top:85px; left:400px;}
}

@-moz-keyframes star3 {
	0%   {top:400px; left:180px;}
	20%   {top:380px; left:240px;}
	40%  {top:370px; left:330px;}
	60%  {top:380px; left:240px;}
	100%  {top:400px; left:180px;}
}

@-moz-keyframes star4 {
	0%   {top:320px; left:0px;}
	20%   {top:300px; left:50px;}
	40%  {top:290px; left:200px;}
	60%  {top:295px; left:50px;}
	100%  {top:320px; left:0px;}
}

@-moz-keyframes star5 {
	0%   {top:300px; left:1000px;}
	20%   {top:290px; left:1150px;}
	40%  {top:270px; left:1200px;}
	60%  {top:295px; left:1150px;}
	100%  {top:300px; left:1000px;}
}

@-moz-keyframes star6 {
	0%   {top:490px; left:900px;}
	20%   {top:440px; left:1100px;}
	40%  {top:420px; left:700px;}
	50%  {top:420px; left:400px;}
	70%  {top:410px; left:700px;}
	100%  {top:490px; left:900px;}
}

@media (min-width: 1440px) {
	body {
		padding: 60px 60px;
	}
}

/*Downloaded from https://www.codeseek.co/arjancodes/the-social-media-invasion-Gafel */
$(document).ready(function() {
		// 2009 facebook
		$('#fb-2009').click(function(event) {
			$('ul#menu li a').attr('class', 'button');
			$('#fb-2009').addClass('button-style');
    
			// reset circle
			$('#circle-container div').attr('class', 'circle fbcircle');
		
			// uk 
			$('#fb-uk').addClass('fb-uk-shrink');
			$('#fb-uk').prop('title', '20M');
			// usa 
			$('#fb-usa').addClass('fb-usa-shrink');
			$('#fb-usa').prop('title', '85M');
			// canada 
			$('#fb-can').addClass('fb-can-shrink');
			$('#fb-can').prop('title', '12M');
			// china 
			$('#fb-chin').addClass('fb-chin-shrink');
			// india 
			$('#fb-ind').addClass('fb-ind-shrink');
			$('#fb-ind').prop('title', '4M');
			// france 
			$('#fb-fr').addClass('fb-fr-shrink');
			$('#fb-fr').prop('title', '12M');
			// italy 
			$('#fb-it').addClass('fb-it-shrink');
			$('#fb-it').prop('title', '11M');
			// brazil 
			$('#fb-bra').addClass('fb-bra-shrink');
			$('#fb-bra').prop('title', '2M');
			// indonesia 
			$('#fb-indo').addClass('fb-indo-shrink');
			$('#fb-indo').prop('title', '9M');
			// germany 
			$('#fb-ger').addClass('fb-ger-shrink');
			$('#fb-ger').prop('title', '4M');
			// s africa 
			$('#fb-safr').addClass('fb-safr-shrink');
			$('#fb-safr').prop('title', '2M');
			// turkey 
			$('#fb-tur').addClass('fb-tur-shrink');
			$('#fb-tur').prop('title', '14M');
			// australia
			$('#fb-aus').addClass('fb-aus-shrink');
			$('#fb-aus').prop('title', '2M');
			// mexico
			$('#fb-mex').addClass('fb-mex-shrink');
			$('#fb-mex').prop('title', '5M');
			// japan
			$('#fb-jap').addClass('fb-jap-shrink');
			$('#fb-jap').prop('title', '4M');
			// egypt
			$('#fb-egy').addClass('fb-egy-shrink');
			$('#fb-egy').prop('title', '3M');
			// russia
			$('#fb-rus').addClass('fb-rus-shrink');
			$('#fb-rus').prop('title', '3M');
			// argentina
			$('#fb-arg').addClass('fb-arg-shrink');
			$('#fb-arg').prop('title', '3M');
			// phillipines
			$('#fb-phil').addClass('fb-phil-shrink');
			$('#fb-phil').prop('title', '7M');
			// malaysia
			$('#fb-mal').addClass('fb-mal-shrink');
			$('#fb-mal').prop('title', '2M');
			// thailand
			$('#fb-thai').addClass('fb-thai-shrink');
			$('#fb-thai').prop('title', '1M');
			// s korea
			$('#fb-skor').addClass('fb-skor-shrink');
			$('#fb-skor').prop('title', '2M');
			// taiwan
			$('#fb-tai').addClass('fb-tai-shrink');
			$('#fb-tai').prop('title', '2M');
			// columbia
			$('#fb-col').addClass('fb-col-shrink');
			$('#fb-col').prop('title', '3M');
			// peru
			$('#fb-peru').addClass('fb-peru-shrink');
			$('#fb-peru').prop('title', '2M');
			// venezuela
			$('#fb-ven').addClass('fb-ven-shrink');
			$('#fb-ven').prop('title', '0.7M');
			// equador
			$('#fb-equ').addClass('fb-equ-shrink');
			$('#fb-equ').prop('title', '0.6M');
			// chile
			$('#fb-chil').addClass('fb-chil-shrink');
			$('#fb-chil').prop('title', '0.9M');
			// nigeria
			$('#fb-nig').addClass('fb-nig-shrink');
			$('#fb-nig').prop('title', '0.4M');
			// morocco
			$('#fb-mor').addClass('fb-mor-shrink');
			$('#fb-mor').prop('title', '0.7M');
			// spain
			$('#fb-spa').addClass('fb-spa-shrink');
			$('#fb-spa').prop('title', '3M');
			// poland
			$('#fb-pol').addClass('fb-pol-shrink');
			$('#fb-pol').prop('title', '0.8M');
			// norway
			$('#fb-nor').addClass('fb-nor-shrink');
			$('#fb-nor').prop('title', '0.8M');
		});

		// 2014 facebook
		$('#fb-2014').click(function(event) {
			$('ul#menu li a').attr('class', 'button');
			$('#fb-2014').addClass('button-style');

			// reset circle
			$('#circle-container div').attr('class', 'circle fbcircle');
		
			//uk
			$('#fb-uk').addClass('fb-uk-grow');
			$('#fb-uk').prop('title', '36M');
			// usa 
			$('#fb-usa').addClass('fb-usa-grow');
			$('#fb-usa').prop('title', '190M');
			// canada 
			$('#fb-can').addClass('fb-can-grow');
			$('#fb-can').prop('title', '19M');
			// china 
			$('#fb-chin').addClass('fb-chin-grow');
			$('#fb-chin').prop('title', '10M');
			// india 
			$('#fb-ind').addClass('fb-ind-grow');
			$('#fb-ind').prop('title', '130M');
			// france 
			$('#fb-fr').addClass('fb-fr-grow');
			$('#fb-fr').prop('title', '28M');
			// italy 
			$('#fb-it').addClass('fb-it-grow');
			$('#fb-it').prop('title', '26M');
			// brazil 
			$('#fb-bra').addClass('fb-bra-grow');
			$('#fb-bra').prop('title', '86M');
			// indonesia 
			$('#fb-indo').addClass('fb-indo-grow');
			$('#fb-indo').prop('title', '62M');
			// germany 
			$('#fb-ger').addClass('fb-ger-grow');
			$('#fb-ger').prop('title', '28M');
			// s africa 
			$('#fb-safr').addClass('fb-safr-grow');
			$('#fb-safr').prop('title', '28M');
			// turkey 
			$('#fb-tur').addClass('fb-tur-grow');
			$('#fb-tur').prop('title', '36M');
			// australia
			$('#fb-aus').addClass('fb-aus-grow');
			$('#fb-aus').prop('title', '13M');
			// mexico
			$('#fb-mex').addClass('fb-mex-grow');
			$('#fb-mex').prop('title', '50M');
			// japan
			$('#fb-jap').addClass('fb-jap-grow');
			$('#fb-jap').prop('title', '22M');
			// egypt
			$('#fb-egy').addClass('fb-egy-grow');
			$('#fb-egy').prop('title', '18M');
			// russia
			$('#fb-rus').addClass('fb-rus-grow');
			$('#fb-rus').prop('title', '14M');
			// argentina
			$('#fb-arg').addClass('fb-arg-grow');
			$('#fb-arg').prop('title', '18M');
			// phillipines
			$('#fb-phil').addClass('fb-phil-grow');
			$('#fb-phil').prop('title', '40M');
			// malaysia
			$('#fb-mal').addClass('fb-mal-grow');
			$('#fb-mal').prop('title', '17M');
			// thailand
			$('#fb-thai').addClass('fb-thai-grow');
			$('#fb-thai').prop('title', '22M');
			// s korea
			$('#fb-skor').addClass('fb-skor-grow');
			$('#fb-skor').prop('title', '16M');
			// taiwan
			$('#fb-tai').addClass('fb-tai-grow');
			$('#fb-tai').prop('title', '19M');
			// columbia
			$('#fb-col').addClass('fb-col-grow');
			$('#fb-col').prop('title', '27M');
			// peru
			$('#fb-peru').addClass('fb-peru-grow');
			$('#fb-peru').prop('title', '13M');
			// venezuela
			$('#fb-ven').addClass('fb-ven-grow');
			$('#fb-ven').prop('title', '13M');
			// equador
			$('#fb-equ').addClass('fb-equ-grow');
			$('#fb-equ').prop('title', '10M');
			// chile
			$('#fb-chil').addClass('fb-chil-grow');
			$('#fb-chil').prop('title', '15M');
			// nigeria
			$('#fb-nig').addClass('fb-nig-grow');
			$('#fb-nig').prop('title', '9M');
			// morocco
			$('#fb-mor').addClass('fb-mor-grow');
			$('#fb-mor').prop('title', '8M');
			// spain
			$('#fb-spa').addClass('fb-spa-grow');
			$('#fb-spa').prop('title', '20M');
			// poland
			$('#fb-pol').addClass('fb-pol-grow');
			$('#fb-pol').prop('title', '17M');
			// norway
			$('#fb-nor').addClass('fb-nor-grow');
			$('#fb-nor').prop('title', '14M');
		});

		// 2009 twitter
		$('#tw-2009').click(function(event) {
			$('ul#menu li a').attr('class', 'button');
			$('#tw-2009').addClass('button-style');
     
			// reset circle
			$('#circle-container div').attr('class', 'circle twcircle');

			// uk
			$('#fb-uk').addClass('tw-uk-shrink');
			$('#fb-uk').prop('title', '0.9M');
			// usa 
			$('#fb-usa').addClass('tw-usa-shrink');
			$('#fb-usa').prop('title', '12M');
			// canada 
			$('#fb-can').addClass('tw-can-shrink');
			$('#fb-can').prop('title', '0.8M');
			// china 
			$('#fb-chin').addClass('tw-chin-shrink');
			// india 
			$('#fb-ind').addClass('tw-ind-shrink');
			$('#fb-ind').prop('title', '1.1M');
			// france 
			$('#fb-fr').addClass('tw-fr-shrink');
			$('#fb-ind').prop('title', '0.5M');
			// italy 
			$('#fb-it').addClass('tw-it-shrink');
			$('#fb-it').prop('title', '0.4M');
			// brazil 
			$('#fb-bra').addClass('tw-bra-shrink');
			$('#fb-bra').prop('title', '1M');
			// indonesia 
			$('#fb-indo').addClass('tw-indo-shrink');
			$('#fb-indo').prop('title', '0.8M');
			// germany 
			$('#fb-ger').addClass('tw-ger-shrink');
			$('#fb-ger').prop('title', '0.6M');
			// s africa 
			$('#fb-safr').addClass('tw-safr-shrink');
			$('#fb-safr').prop('title', '0.4M');
			// turkey
			$('#fb-tur').addClass('tw-tur-shrink');
			$('#fb-tur').prop('title', '0.8M');
			// australia
			$('#fb-aus').addClass('tw-aus-shrink');
			$('#fb-aus').prop('title', '0.3M');
			// mexico
			$('#fb-mex').addClass('tw-mex-shrink');
			$('#fb-mex').prop('title', '0.8M');
			// japan
			$('#fb-jap').addClass('tw-jap-shrink');
			$('#fb-jap').prop('title', '1.2M');
			// egypt
			$('#fb-egy').addClass('tw-egy-shrink');
			$('#fb-egy').prop('title', '0.2M');
			// russia
			$('#fb-rus').addClass('tw-rus-shrink');
			$('#fb-rus').prop('title', '0.3M');
			// argentina
			$('#fb-arg').addClass('tw-arg-shrink');
			$('#fb-arg').prop('title', '0.8M');
			// phillipines
			$('#fb-phil').addClass('tw-phil-shrink');
			$('#fb-phil').prop('title', '1M');
			// malaysia
			$('#fb-mal').addClass('tw-mal-shrink');
			$('#fb-mal').prop('title', '0.7M');
			// thailand
			$('#fb-thai').addClass('tw-thai-shrink');
			$('#fb-thai').prop('title', '0.9M');
			// s korea
			$('#fb-skor').addClass('tw-skor-shrink');
			$('#fb-skor').prop('title', '0.2M');
			// taiwan
			$('#fb-tai').addClass('tw-tai-shrink');
			$('#fb-tai').prop('title', '0.4M');
			// columbia
			$('#fb-col').addClass('tw-col-shrink');
			$('#fb-col').prop('title', '1.2M');
			// peru
			$('#fb-peru').addClass('tw-peru-shrink');
			$('#fb-peru').prop('title', '0.6M');
			// venezuela
			$('#fb-ven').addClass('tw-ven-shrink');
			$('#fb-ven').prop('title', '0.2M');
			// equador
			$('#fb-equ').addClass('tw-equ-shrink');
			$('#fb-equ').prop('title', '0.1M');
			// chile
			$('#fb-chil').addClass('tw-chil-shrink');
			$('#fb-chil').prop('title', '0.2M');
			// nigeria
			$('#fb-nig').addClass('tw-nig-shrink');
			$('#fb-nig').prop('title', '0.2M');
			// morocco
			$('#fb-mor').addClass('tw-mor-shrink');
			$('#fb-mor').prop('title', '0.3M');
			// spain
			$('#fb-spa').addClass('tw-spa-shrink');
			$('#fb-spa').prop('title', '0.7M');
			// poland
			$('#fb-pol').addClass('tw-pol-shrink');
			$('#fb-pol').prop('title', '0.4M');
			// norway
			$('#fb-nor').addClass('tw-nor-shrink');
			$('#fb-nor').prop('title', '0.2M');
		});

		// 2014 twitter
		$('#tw-2014').click(function(event) {
			$('ul#menu li a').attr('class', 'button');
			$('#tw-2014').addClass('button-style');
        
			// reset circle
			$('#circle-container div').attr('class', 'circle twcircle');

			// uk
			$('#fb-uk').addClass('tw-uk-grow');
			$('#fb-uk').prop('title', '15M');
			// usa 
			$('#fb-usa').addClass('tw-usa-grow');
			$('#fb-usa').prop('title', '34M');
			// canada 
			$('#fb-can').addClass('tw-can-grow');
			$('#fb-can').prop('title', '5M');
			// chin 
			$('#fb-chin').addClass('tw-chin-grow');
			// india
			$('#fb-ind').addClass('tw-ind-grow');
			$('#fb-ind').prop('title', '44M');
			// france
			$('#fb-fr').addClass('tw-fr-grow');
			$('#fb-fr').prop('title', '4M');
			// italy
			$('#fb-it').addClass('tw-it-grow');
			$('#fb-it').prop('title', '8M');
			// brazil
			$('#fb-bra').addClass('tw-bra-grow');
			$('#fb-bra').prop('title', '26M');
			// indonesia
			$('#fb-indo').addClass('tw-indo-grow');
			$('#fb-indo').prop('title', '35M');
			// germany
			$('#fb-ger').addClass('tw-ger-grow');
			$('#fb-ger').prop('title', '4M');
			// s africa 
			$('#fb-safr').addClass('tw-safr-grow');
			$('#fb-safr').prop('title', '12M');
			// turkey
			$('#fb-tur').addClass('tw-tur-grow');
			$('#fb-tur').prop('title', '30M');
			// australia
			$('#fb-aus').addClass('tw-aus-grow');
			$('#fb-aus').prop('title', '4M');
			// mexico
			$('#fb-mex').addClass('tw-mex-grow');
			$('#fb-mex').prop('title', '28M');
			// japan
			$('#fb-jap').addClass('tw-jap-grow');
			$('#fb-jap').prop('title', '8M');
			// egypt
			$('#fb-egy').addClass('tw-egy-grow');
			$('#fb-egy').prop('title', '10M');
			// russia
			$('#fb-rus').addClass('tw-rus-grow');
			$('#fb-rus').prop('title', '4M');
			// argentina
			$('#fb-arg').addClass('tw-arg-grow');
			$('#fb-arg').prop('title', '9M');
			// phillipines
			$('#fb-phil').addClass('tw-phil-grow');
			$('#fb-phil').prop('title', '12M');
			// malaysia
			$('#fb-mal').addClass('tw-mal-grow');
			$('#fb-mal').prop('title', '6M');
			// thailand
			$('#fb-thai').addClass('tw-thai-grow');
			$('#fb-thai').prop('title', '4M');
			// s korea
			$('#fb-skor').addClass('tw-skor-grow');
			$('#fb-skor').prop('title', '5M');
			// taiwan
			$('#fb-tai').addClass('tw-tai-grow');
			$('#fb-tai').prop('title', '3.4M');
			// columbia
			$('#fb-col').addClass('tw-col-grow');
			$('#fb-col').prop('title', '0.8M');
			// peru
			$('#fb-peru').addClass('tw-peru-grow');
			$('#fb-nor').prop('title', '2.5M');
			// venezuela
			$('#fb-ven').addClass('tw-ven-grow');
			$('#fb-nor').prop('title', '2.4M');
			// equador
			$('#fb-equ').addClass('tw-equ-grow');
			$('#fb-equ').prop('title', '0.8M');
			// chile
			$('#fb-chil').addClass('tw-chil-grow');
			$('#fb-chil').prop('title', '1.3M');
			// nigeria
			$('#fb-nig').addClass('tw-nig-grow');
			$('#fb-nig').prop('title', '0.9M');
			// morocco
			$('#fb-mor').addClass('tw-mor-grow');
			$('#fb-mor').prop('title', '1.1M');
			// spain
			$('#fb-spa').addClass('tw-spa-grow');
			$('#fb-spa').prop('title', '3.8M');
			// poland
			$('#fb-pol').addClass('tw-pol-grow');
			$('#fb-pol').prop('title', '2.4M');
			// norway
			$('#fb-nor').addClass('fb-nor-grow');
			$('#fb-nor').prop('title', '1.8M');
		});
	});

Comments