Last active
January 31, 2017 16:25
-
-
Save TommyCoin80/8aae725a60433126482cff908b74014a to your computer and use it in GitHub Desktop.
Card Shuffler
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<head> | |
<style> | |
text { | |
font-family:"Impact"; | |
font-size:30px; | |
fill:white; | |
stroke:black; | |
} | |
</style> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
<body> | |
<script> | |
var margin = {top:50,left:50,bottom:50,right:50}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var svg = d3.select("body").append("svg") | |
.attr("height", height + margin.top + margin.bottom) | |
.attr("width", width + margin.left + margin.right) | |
.append("g") | |
.attr("transform","translate(" + margin.left + "," + margin.top + ")"); | |
var cardWidth = 200, | |
cardHeight = 75; | |
var duration = 1000; | |
var cards = svg.append("g") | |
.attr("transform","translate(" + (width/2 - cardWidth/2) + "," + (height/2 - cardHeight/2) + ")"); | |
var bottomCard = cards.append("g") | |
.attr("class","card bottom"); | |
var topCard = cards.append("g") | |
.attr("class","card top"); | |
bottomCard.append("rect") | |
.attr("width", cardWidth) | |
.attr("height", cardHeight) | |
.style("fill","#d9534f") | |
.style("stroke","black") | |
bottomCard.append("text") | |
.attr("dx", cardWidth/2) | |
.attr("dy", cardHeight/2 + 12) | |
.attr("text-anchor","middle") | |
//.attr("alignment-baseline","middle") | |
.text("Bottom") | |
topCard.append("rect") | |
.attr("width", cardWidth) | |
.attr("height", cardHeight) | |
.style("fill","#5cb85c") | |
.style("stroke","black") | |
topCard.append("text") | |
.attr("dx", cardWidth/2) | |
.attr("dy", cardHeight/2 + 12) | |
.attr("text-anchor","middle") | |
//.attr("alignment-baseline","middle") | |
.text("Top") | |
topCard.transition() | |
.duration(duration) | |
.attr("transform","translate(0," + cardHeight + ")") | |
.on("end", tick) | |
function tick() { | |
var color = topCard.select("rect").style("fill"); | |
var text = topCard.select("text").text() | |
topCard.attr("transform","translate(0,0)") | |
.select("rect") | |
.style("fill", bottomCard.select("rect").style("fill")); | |
topCard.select("text") | |
.text(bottomCard.select("text").text()); | |
bottomCard.attr("transform","translate(0," + cardHeight + ")") | |
.select("rect") | |
.style("fill",color); | |
bottomCard.select("text") | |
.text(text); | |
bottomCard.transition() | |
.duration(duration) | |
.attr("transform","translate(0,0)") | |
.on("end", function() { | |
topCard.transition() | |
.duration(duration) | |
.attr("transform","translate(0," + cardHeight + ")") | |
.on("end", tick) | |
}) | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment