<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Circles Bounce</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<style>
.container {
background-color:#F10;
height: 700px;
width: 100%;
}
.circ {
border-radius: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-box-shadow: 0px 0px 92px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 92px 5px rgba(0,0,0,0.4);
box-shadow: 0px 0px 92px 5px rgba(0,0,0,0.4);
}
.circX {
background-color: #F00;
width: 700px;
height: 700px;
margin-top: -350px;
margin-left: -350px;
}
.circ0 {
background-color: #F10;
width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
}
.circ1 {
background-color: #F60;
width: 300px;
height: 300px;
margin-top: -150px;
margin-left: -150px;
}
.circ2 {
width: 200px;
height: 200px;
background-color: #F80;
margin-top: -100px;
margin-left: -100px;
}
.circ3 {
width: 100px;
height: 100px;
background-color: #F90;
margin-top: -50px;
margin-left: -50px;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<div class="container">
<div class="circ circX"></div>
<div class="circ circ0"></div>
<div class="circ circ1"></div>
<div class="circ circ2"></div>
<div class="circ circ3"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script id="rendered-js" >
var tl = new TimelineMax({ repeat: -1, delay: .2 }),
circle = $(".circ").toArray();
tl.staggerFrom(circle, 3, { left: "50%", ease: Elastic.easeOut }, .05).
staggerTo(circle, 3, { left: "20%", ease: Elastic.easeOut }, .05).
staggerTo(circle, 3, { left: "50%", ease: Elastic.easeOut }, .05).
staggerTo(circle, 3, { left: "80%", ease: Elastic.easeOut }, .05).
staggerTo(circle, 3, { left: "50%", ease: Elastic.easeOut }, .05);
</script>
</body>
</html>
Comments
Post a Comment