shimizu/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

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

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>