Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function makeBall(){
var svg = d3.select("svg");
svg.append("circle")
.attr("class","mainBall")
.attr("r", "30px")
.attr("cx", "50%")
.attr("cy", "20%");
var width = $("svg").width();
width = width * 0.5;
var newW = width + 25;
svg.append("circle")
.attr("id", "hiding1")
.attr("class","hiding")
.attr("r", "30px")
.attr("cx", newW)
.attr("cy", "20%");
newW = width - 25;
svg.append("circle")
.attr("id", "hiding2")
.attr("class","hiding")
.attr("r", "30px")
.attr("cx", newW)
.attr("cy", "20%");
svg.append("circle")
.attr("class", "topCircle")
.style("opacity", "0")
.attr("r", "5px")
.attr("cx", "50%")
.attr("cy", "20%");
var height = $("svg").height();
height = height * 0.2 + 100;
svg.append("circle")
.attr("class", "bottomCircle")
.style("opacity", "1")
.attr("r", "5px")
.attr("cx", "50%")
.attr("cy", height);
}
function toggleBall(className){
var ball = d3.select("." + className);
var opa = ball.style("opacity");
if(opa == 1){
ball.transition()
.duration(500)
.style("opacity", "0");
}else{
ball.transition()
.duration(500)
.style("opacity", "1");
}
}
function gravity(){
var ballMain = d3.select(".mainBall")
.transition()
.duration(1000)
.attr("transform","translate(0," + 100 + ")")
.on("start", function(){ toggleBall("topCircle"); })
.transition()
.duration(1000)
.attr("transform","translate(0," + 0 + ")")
.on("start", function(){ toggleBall("bottomCircle"); })
.transition()
.on("start", gravity);
var baseHeight = $("svg").height() * 0.2;
var newHeight = baseHeight + 100;
var baseWidth = $("svg").width() * 0.5;
var ball = d3.select("#hiding1")
.transition()
.duration(1000)
.attr("transform","translate(0," + 100 + ")")
.on("start", function(){ toggleBall("topCircle"); })
.transition()
.duration(1000)
.attr("transform","translate(0," + 0 + ")")
.on("start", function(){ toggleBall("bottomCircle"); })
.transition()
.on("start", gravity);
var ball = d3.select("#hiding2")
.transition()
.duration(1000)
.attr("transform","translate(0," + 100 + ")")
.on("start", function(){ toggleBall("topCircle"); })
.transition()
.duration(1000)
.attr("transform","translate(0," + 0 + ")")
.on("start", function(){ toggleBall("bottomCircle"); })
.transition()
.on("start", gravity);
//ball.attr("transition-timing-function('exp')");
}
$(document).ready(function() {
var svg = d3.select("svg")
.attr("width", "100%")
.attr("height", "250px");
makeBall();
gravity();
});
</script>
<style>
circle{
fill : #00c3ff;
}
circle.hiding{
fill : #0f0f11;
}
body{
background-color:#0f0f11;
}
</style>
</head>
<body>
<svg>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment