With some help from d3
Last active
June 16, 2019 03:54
-
-
Save JSDiamond/5c4d102d4703328f6d5e to your computer and use it in GitHub Desktop.
Thumbnail image transitions
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> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="icon" href="http://www.bloomberg.com/graphics/assets/img/favicon.png" type="image/x-icon"> | |
<title>thumbnail flyover</title> | |
<style type="text/css"> | |
*{ | |
padding: 0; | |
margin: 0; | |
} | |
.image-bin{ | |
max-width: 900px; | |
height: 608px; | |
margin: 0 auto; | |
position: relative; | |
} | |
.image-bin img{ | |
width: 100%; | |
position: absolute; | |
z-index: 2; | |
pointer-events: none; | |
left: 10%; | |
top: 0%; | |
border: 2px solid #333; | |
-webkit-transition: width 0.55s ease, opacity 0.4s, border-width 0.6s ease, top 0.777s ease, left 0.777s ease, margin-top 0.4s ease, z-index 0.1s 0.5s ease; | |
-moz-transition: width 0.55s ease, opacity 0.4s, border-width 0.6s ease, top 0.777s ease, left 0.777s ease, margin-top 0.4s ease, z-index 0.1s 0.5s ease; | |
-ms-transition: width 0.55s ease, opacity 0.4s, border-width 0.6s ease, top 0.777s ease, left 0.777s ease, margin-top 0.4s ease, z-index 0.1s 0.5s ease; | |
-o-transition: width 0.55s ease, opacity 0.4s, border-width 0.6s ease, top 0.777s ease, left 0.777s ease, margin-top 0.4s ease, z-index 0.1s 0.5s ease; | |
transition: width 0.55s ease, opacity 0.4s, border-width 0.6s ease, top 0.777s ease, left 0.777s ease, margin-top 0.4s ease, z-index 0.1s 0.5s ease; | |
} | |
.image-bin img.tiny{ | |
width: 10px; | |
border: none; | |
} | |
.image-bin img.medium{ | |
width: 80%; | |
margin-top: 20px; | |
left: 10% !important; | |
/*top: 0% !important;*/ | |
border: 3px solid #333; | |
z-index: 3; | |
-webkit-transition: width 0.5s ease, opacity 0.4s, border-width 0.6s ease, top 0.8s ease, left 0.8s ease, margin-top 0.4s ease, z-index 0s; | |
-moz-transition: width 0.5s ease, opacity 0.4s, border-width 0.6s ease, top 0.8s ease, left 0.8s ease, margin-top 0.4s ease, z-index 0s; | |
-ms-transition: width 0.5s ease, opacity 0.4s, border-width 0.6s ease, top 0.8s ease, left 0.8s ease, margin-top 0.4s ease, z-index 0s; | |
-o-transition: width 0.5s ease, opacity 0.4s, border-width 0.6s ease, top 0.8s ease, left 0.8s ease, margin-top 0.4s ease, z-index 0s; | |
transition: width 0.5s ease, opacity 0.4s, border-width 0.6s ease, top 0.8s ease, left 0.8s ease, margin-top 0.4s ease, z-index 0s; | |
} | |
.box-bin{ | |
width: 100px; | |
margin: 0px auto 0; | |
position: relative; | |
top: 30px; | |
} | |
.box-bin .box{ | |
width: 10px; | |
height: 14px; | |
margin: 1px 3px; | |
background-color: coral; | |
border: 1px solid #333; | |
display: inline-block; | |
transition: border 0.6s ease; | |
} | |
.box-bin .box:hover{ | |
border: 1px solid coral; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="image-bin"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/processed.png" data-agent="1" class="hidden meat"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/beef.jpg" data-agent="2" class="hidden meat"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/caprolactam-71.png" data-agent="3" class="hidden probnot"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/smokeless-89-b.png" data-agent="4" class="hidden vice"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/tobaccosmoke-100E.png" data-agent="5" class="hidden vice"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/alcohol-100E.png" data-agent="6" class="hidden vice"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/coffee-51.png" data-agent="7" class="hidden vice"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/airpolution-105.png" data-agent="8" class="hidden pollution"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/diesel-105.png" data-agent="9" class="hidden pollution"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/indooremissions-95.png" data-agent="10" class="hidden pollution"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/gasoline-105.png" data-agent="11" class="hidden pollution"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/xray-100D-b.png" data-agent="12" class="hidden sun"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/solar-100D.png" data-agent="13" class="hidden sun"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/tanning-100D.png" data-agent="14" class="hidden sun"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/ionizing-100D.png" data-agent="15" class="hidden sun"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/painter-100F.png" data-agent="16" class="hidden occupation"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/shift-98.png" data-agent="17" class="hidden occupation"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/hair-99.png" data-agent="18" class="hidden occupation"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/drycleaning-63.png" data-agent="19" class="hidden occupation"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/wooddust-100C.png" data-agent="20" class="hidden poison"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/shale-100F.png" data-agent="21" class="hidden poison"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/formaldehyde-100F.png" data-agent="22" class="hidden poison"> | |
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/roundup-112.png" data-agent="23" class="hidden poison"> | |
<div class="box-bin"> | |
</div> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<script type="text/javascript"> | |
var imgs = d3.selectAll('.image-bin img') | |
var boxbin = d3.select('.box-bin') | |
var imagebin = d3.selectAll('.image-bin') | |
var imagebin_position = imagebin.node().getBoundingClientRect() | |
var boxes = boxbin.selectAll('div') | |
.data(d3.range(imgs[0].length)) | |
.enter() | |
.append('div') | |
.classed('box', true) | |
.on('mouseover', function(d,i){ | |
d3.select('.image-bin img[data-agent="' + ( i + 1 ) + '"]') | |
.classed('medium', true) | |
}) | |
.on('mouseleave', function(d,i){ | |
d3.select('.image-bin img.medium') | |
.classed('medium', false) | |
}) | |
imgs | |
.style('left', function(d,i){ | |
return boxes[0][i].getBoundingClientRect().left-imagebin_position.left+1+"px" | |
}) | |
.style('top', function(d,i){ | |
return boxes[0][i].getBoundingClientRect().top+pageYOffset+1+"px" | |
}) | |
.classed('tiny', true) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment