Skip to content

Instantly share code, notes, and snippets.

@erikhazzard
Last active November 13, 2015 05:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save erikhazzard/f78d49a3c969446312b5 to your computer and use it in GitHub Desktop.
Save erikhazzard/f78d49a3c969446312b5 to your computer and use it in GitHub Desktop.
image fader
<!DOCTYPE html>
<meta charset="utf-8">
<style>
line {
stroke: #000;
stroke-width: 1.5px;
stroke-linecap: round;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 1050,
height = 1500,
delay = 2000,
duration = 80;
// TODO: Get username from command line. Have phantom script pass in name in the url
var USERNAME = 'enoex';
if (window.location.hash) {
USERNAME = ('' + window.location.hash).replace('#', '');
} else if (window.location.search && window.location.search.match(/\?username=(.*)$/)) {
USERNAME = window.location.search.match(/\?username=(.*)$/);
}
if (!USERNAME) { USERNAME = '_undefined'; }
USERNAME = 'enoex';
var IMAGE_FADE_DURATION = 100;
var IMAGE_FADE_DELAY = 1000;
var INITIAL_PHANTOM_DELAY = 700;
var imageWrapper = d3.select("body").append("div")
.style({
width: width,
height: height,
position: 'absolute',
top: 0,
left: 0
});
d3.json('https://gist.githubusercontent.com/enoex/b08fd043b84230ae0433/raw/c61d3197e1a38f6751f20113b923454941124f77/images.json', function(d){
d = d[0];
IMAGE_FADE_DELAY = 4000 / d[USERNAME].length;
// preload images
for(var i=0; i<d[USERNAME].length; i++){
imageWrapper.append('img').attr({
width: width + 'px',
height: height + 'px',
src: d[USERNAME][i]
})
.style({
width: width,
height: height,
'background-size': 'cover',
opacity: function(){
return i === 0 ? 1 : 0;
},
position: 'absolute'
})
.transition()
.duration(IMAGE_FADE_DURATION)
.delay(i === 0 ? INITIAL_PHANTOM_DELAY : (i * IMAGE_FADE_DELAY) + INITIAL_PHANTOM_DELAY)
.style({
opacity: 1
});
}
// Switch images. Fade in / out
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment