Created
January 9, 2014 00:31
-
-
Save rfriberg/8327361 to your computer and use it in GitHub Desktop.
D3 slider example
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"> | |
<style> | |
.description { | |
font-size: 12px; | |
font-weight: bold; | |
width: 700px; | |
} | |
.description span { | |
display: inline-block; | |
width: 60px; | |
} | |
.description input[type=text] { | |
width: 400px; | |
} | |
.description button { | |
border: 0; | |
padding: 5px 10px; | |
background: #121212; | |
color: #fff; | |
border-radius: 40px; | |
} | |
.description button:hover { | |
background: #F92235; | |
cursor: pointer; | |
} | |
.description #update { | |
font-size: 14px; | |
float: right; | |
margin-top: -20px; | |
width: 80px; | |
height: 40px; | |
} | |
/* image slider */ | |
.photos { | |
cursor: ew-resize; | |
position:relative; | |
overflow:visible; | |
height: 400px; | |
width: 700px; | |
margin-top: 50px; | |
} | |
.photos, .photos .layer { | |
height: 400px; | |
} | |
.photos .separator { | |
border-left: 1px solid #000; | |
border-right: 1px solid #000; | |
height: 430px; | |
left: -1px; | |
line-height: 30px; | |
overflow: visible; | |
position: absolute; | |
top: -30px; | |
width: 2px; | |
z-index: 10; | |
} | |
.photos .separator div { | |
background: rgba(97,78,153,0.6); | |
background: #333; | |
border-left: 1px solid #fff; | |
color: #F2EFE9; | |
font-family: 'Bree Serif', sans-serif; | |
font-weight: bold; | |
font-size: 12px; | |
line-height: 30px; | |
position: absolute; | |
left: 0px; | |
top: 0px; | |
text-align: center; | |
width: 75px; | |
z-index: 9; | |
border-radius: 5px 50px 50px 5px | |
} | |
.photos .separator div.before { | |
left: -75px; | |
border-left: none; | |
border-right: 1px solid #fff; | |
border-radius: 50px 5px 5px 50px | |
} | |
#photo-before { | |
max-width:100%; | |
min-width:100%; | |
position:absolute; | |
background:url(http://www.mapbox.com/osm-data-report/images/before-crop.jpg) no-repeat; | |
background-size:100% auto !important; | |
} | |
#photo-after { | |
max-width:100%; | |
min-width:100%; | |
position:absolute; | |
background:url(http://www.mapbox.com/osm-data-report/images/after-crop.jpg) no-repeat; | |
background-size:100% auto !important; | |
} | |
</style> | |
<body> | |
<h2>Before and After images</h2> | |
<div class='photos'> | |
<div class="separator"> | |
<div class="before">Before</div> | |
<div class="after">After</div> | |
</div> | |
<div class='layer' id='photo-after'></div> | |
<div class='layer' id='photo-before'></div> | |
</div> | |
<div class="description"> | |
<p>Add your own image urls: <br /> | |
<span>Before:</span><input type="text" id="before_pic" value="" /><br /> | |
<span>After:</span><input type="text" id="after_pic" value="" /> | |
<button id="update" name="update" onclick="updatePhotos('custom');">Update</button> | |
</p> | |
<p>Or try one of these:<br /> | |
<button name="antarctica" onclick="updatePhotos('http://www.nasa.gov/images/content/753090main_bedmap2.jpg', 'http://www.nasa.gov/images/content/753191main_AA_bedrock_surface.4960.jpg');">Under the ice</button> | |
<button name="tornado" onclick="updatePhotos('http://i.imwx.com/web/2013/plaza-towers-2-before.jpg', 'http://i.imwx.com/web/2013/plaza-towers-2-after.jpg');">Tornado damage</button> | |
</p> | |
<script src='http://d3js.org/d3.v2.min.js'></script> | |
<script> | |
/* Update photo urls */ | |
var updatePhotos = function(b,a) { | |
if(b == 'custom' || a == 'custom') { | |
b = document.getElementById('before_pic').value; | |
a = document.getElementById('after_pic').value; | |
if( !b.length || !a.length) { | |
alert('Enter image URLs'); | |
return; | |
} | |
} | |
document.getElementById('photo-before').style.background="url("+b+") no-repeat"; | |
document.getElementById('photo-after').style.background="url("+a+") no-repeat"; | |
} | |
/* Gettin down to D3 business */ | |
var beforeLayer = d3.select('#photo-before').node(); | |
d3.select('.photos') | |
.on('mousemove', function() { | |
var pos = d3.mouse(this); | |
d3.timer.flush(); | |
d3.timer(function() { | |
d3.select('.separator').style("left", pos[0] + 'px'); | |
beforeLayer.style.clip = 'rect(0px ' + pos[0] + 'px 9999999px 0px)'; | |
return true; | |
}, 0); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment