クリップスライド by shimizu

index.html

<!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>