<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button class="startAnimation">Start the Animation</button>
<button class="stopAnimation">Stop the Animation</button>
</body>
</html>.gear {
position:relative;
display:block;
margin:60px auto;
width:0;
height:0;
border-radius:50%;
border:0 solid #444;
& .gearTooth {
position:absolute;
display:block;
background-color:transparent;
width:12px;
height:6px;
padding-bottom:94px;
z-index:100;
transform-origin:50% 50%;
margin:0 auto;
top:-30px;
left:14px;
&::before {
content:'';
position:relative;
display:block;
width:12px;
height:20px;
background-color:#444;
}
}
}
html {
background-color:#777;
}function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function initGear(){
//create a variable representing our gear div.
var $gear = $('<div class="gear"></div>');
$('body').append($gear);
$gear.velocity({
width: 40,
height: 40,
borderWidth: 24},200,'ease-in', addTeeth);
//create a jQuery object of the element that
//will be each gear tooth.
var $gearTooth = $('<div class="gearTooth"></div>');
//set initial gear tooth position around
//gear. one might alter this variable to
//create a gear with missing teeth.
var rotationIndex = 0;
function addTeeth() {
//append gear teeth to div.gear element
for (var i=0;i<12;i++) {
var xPos = getRandomInt(-400,400);
var yPos = getRandomInt(-400,400);
$gearTooth
.clone()
.appendTo($gear)
.velocity({tranlateX: xPos,translateY:[0,yPos], rotateZ: rotationIndex},1000,'ease')
//set each gear tooth to be rotated around center of gear slightly
rotationIndex += 30;
}
}
setTimeout(spinGear,500);
};
//this function initiates the gear spin.
function spinGear() {
//note that this uses velocity, not
//the standard jQuery .animate.
//velocityjs is awesome! See:
//https://github.com/julianshapiro/velocity
$('.gear').velocity({rotateZ: 3000}, 36000, 'ease');
}
$('.startAnimation').on('click', function(){
if ($('.gear').length === 0 ) {
initGear();
}
});
$('.stopAnimation').on('click', function(){
//This is velocity's manual stop command.
$('.gear').velocity('stop');
$('.gear').css({'transform': 'rotate(0)'});
$('.gearTooth').velocity({
translateX: [250,0]
},500,'ease');
$('.gearTooth').velocity({
translateY: [1000,0]
},500,'ease-in', function(){
$('.gear').fadeOut(function(){
$('.gear').remove();
});
});
});
External CSS
This Pen doesn't use any external CSS resources.