Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
.mbutton {stroke: #c4c4c4; fill: #f4f4f4; stroke-width: 2px;}
.dumtex {stroke: none; fill: #111222; font-size: 1em;}
</style>
</head>
<body>
<script>
function translate(x, y){
return "translate(" + [x, y] + ")"
}
var lh = 14; // line height
var img_prefix = "https://cloud.githubusercontent.com/assets/"
var img_bottom = "619340/15272843/64e20f62-1a86-11e6-8b90-054116da90fa.png"
var img_top = "619340/15272846/6ac53e72-1a86-11e6-806a-f32b4017068b.png"
var svg = d3.select("body").append("svg")
function make_image(image_name, url, op){
var obj = svg.append("image")
.classed(image_name, true)
.attr({x: 100, y: 10, height: 500, width: 500})
.attr({"xlink:href": url, opacity: op})
return obj
}
function make_button(button_name, location, text){
var button = svg.append('g')
.attr({transform: translate(location.x, location.y)})
.classed(button_name, true)
button.append('rect')
.attr({height:20, width:20, rx:4})
.classed('mbutton', true)
button.append('text')
.classed('dumtex', true)
.attr({x:29, y:13})
.text(text)
return button
}
make_image('bottom_image', img_prefix + img_bottom, 1.0);
make_image('top_image', img_prefix + img_top, 1.0);
make_image('top_image_2', img_prefix + img_top, 0.0);
var button1 = make_button('gmbutton_one', {x:110, y:50}, "move in place");
var button2 = make_button('gmbutton_two', {x:270, y:50}, "copy and move");
var button3 = make_button('gmbutton_reset', {x:540, y:50}, "reset");
function mover(amt){
var img = d3.select('.top_image')
.transition()
.duration(900)
.attr({transform: translate(0, amt)})
}
button1.on('click', function(){
mover(4*-lh)
})
button2.on('click', function(){
var img = d3.select('.top_image_2')
.transition()
.duration(9)
.attr({opacity: 1.0})
mover(5*-lh)
})
button3.on('click', function(){
d3.select('.top_image_2').attr({opacity: 0.0, transform: translate(0,0)})
d3.select('.top_image').attr({transform: translate(0,0)})
})
</script>
</body>