Skip to content

Instantly share code, notes, and snippets.

@shimizu
Last active January 28, 2016 07:11
Show Gist options
  • Save shimizu/cdcd6a1dcd304c2318fd to your computer and use it in GitHub Desktop.
Save shimizu/cdcd6a1dcd304c2318fd to your computer and use it in GitHub Desktop.
クリップスライド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>クリップスライド</title>
<style>
.wrapper {
width: 100%;
height: 100%;
}
.img-box {
margin: 0 auto;
position: relative;
width: 800px;
height: 500px;
background-color: grey;
}
.img-panel {
position: absolute;
top:0px;
left: 0px;
width: 100%;
height: 100%;
clip:rect(0px,800,500,0px);
}
.img-slider {
color: white;
text-align: center;
position: absolute;
width: 100px;
height: 50px;
border:4px solid black;
background-color: black;
z-index: 9999;
}
#slider1 {
top:0px;
left: -50px;
}
#slider2 {
top:60px;
left: -50px;
}
#slider3 {
top:120px;
left: -50px;
}
#slider4 {
top:180px;
left: -50px;
}
#slider5 {
top:240px;
left: -50px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="img-box">
<div id="img5" class="img-panel" style="background-color:gray; "></div>
<div id="slider5" class="img-slider" data-panel="img5" style="background-color: gray; ">gray</div>
<div id="img4" class="img-panel" style="background-color:orange; "></div>
<div id="slider4" class="img-slider drag" data-panel="img4" style="background-color: orange; ">orange</div>
<div id="img3" class="img-panel" style="background-color:green;"></div>
<div id="slider3" class="img-slider drag" data-panel="img3" style="background-color: green; ">green</div>
<div id="img2" class="img-panel" style="background-color: red; "></div>
<div id="slider2" class="img-slider drag" data-panel="img2" style="background-color: red; ">red</div>
<div id="img1" class="img-panel" style="background-color: blue; "></div>
<div id="slider1" class="img-slider drag" data-panel="img1" style="background-color: blue; ">blue</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var boxWidth = document.querySelector(".img-box").clientWidth;
var boxHeight = document.querySelector(".img-box").clientHeight;
var slideWidth = document.querySelector(".img-slider").clientWidth;
var hsw = slideWidth/2;
var xScale = d3.scale.linear().domain([-hsw, boxWidth-hsw]).range([-hsw, boxWidth-hsw]).clamp(true)
var drag = d3.behavior.drag()
.on("drag", dragFn)
d3.selectAll(".drag").call(drag)
function dragFn(d,i ) {
var x = d3.select(this).node().offsetLeft + d3.event.dx;
d3.select(this).style("left", xScale(x) + "px")
var target_id = d3.select(this).node().dataset.panel
clip(target_id, x+hsw);
}
function clip(id, clipX) {
console.log(id)
d3.select("#"+id).node().style.clip = 'rect(' + [0, boxWidth , boxHeight, clipX].join('px,') + 'px)';
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment