[Demo] CheckBox Click When Disabled

[Demo] CheckBox Click When Disabled

by dying_sakura

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

	
	
	
	
	
	
	
<div id="balls">
	<div class="ball blue">
		<div><span>7</span></div>
	</div>
	<div class="ball green">
		<div><span>48</span></div>
	</div>
	<div class="ball red">
		<div><span>15</span></div>
	</div>
	<div class="ball yellow">
		<div><span>22</span></div>
	</div>
	<div class="ball blue">
		<div><span>8</span></div>
	</div>
</div>
	
	
	
	
</body>
</html>

CSS

body {
  background: #555;
	font:16px/1 Helvetica, Arial, sans-serif;
}

.ball{
	position:absolute;
	left:-120px;
	width:90px;
	height:90px;
	background:#004E99;
  border-radius:50%;
	box-shadow: 20px 30px 30px -10px rgba(0,0,0,0.4);
}
.ball>div{
	position:absolute;
	width:100%;
	height:100%;
	border-radius:50%;
}
.ball>div>span{
	position:absolute;
	left:23px;
	top:14px;
	width:45px;
	height:45px;
	border-radius:50%;
	text-align:center;
	line-height:45px;
	font-size:24px;
	font-weight:bold;
	background:#fff;
}
/* YOUR COLORS */
.ball.blue{   background: radial-gradient(circle at 20px 20px, #09f, #001);}
.ball.red{    background: radial-gradient(circle at 20px 20px, #f30, #001);}
.ball.green{  background: radial-gradient(circle at 20px 20px, #0f4, #001);}
.ball.yellow{ background: radial-gradient(circle at 20px 20px, #fc0, #001);}

JavaScript

var $ball = $('#balls > div'),
    diameter = $ball.height(),
    perimeter = Math.PI * diameter,
		n = $ball.length,
    i = 0,
		itv;

itv = setInterval(function(){
	if(i>n)clearInterval(itv);
	rotateBall( 500-(diameter*i) );
	i++;
},1000);

function rotateBall(distance) {
	console.log( distance );
  var degree = distance * 360 / perimeter;
	$ball.eq(i).css({
		transition: "2s cubic-bezier(1.000, 1.450, 0.185, 0.850)",
		transform: 'translateX('+ distance +'px)'
	}).find('div').css({
		transition: "2s cubic-bezier(1.000, 1.450, 0.185, 0.850)",
		transform: 'rotate(' + degree + 'deg)'	
	});
}