Skip to content

Instantly share code, notes, and snippets.

@nthitz

nthitz/README.md

Last active September 2, 2015 05:56
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 nthitz/b8f8f112394d28f61d48 to your computer and use it in GitHub Desktop.
Save nthitz/b8f8f112394d28f61d48 to your computer and use it in GitHub Desktop.
Download ZIP
blocks_party
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
html,body {
font-family: 'Open Sans', sans-serif;
}
text {
text-transform:uppercase;
text-anchor:middle;
}
</style>
</head>
<body>
<script>
var input = 'buildingblocks & enjalot ❤'.split('');
var w = window.outerWidth,
h = window.outerHeight,
w = 960,
h = 460,
svg = d3.select('body').append('svg')
.attr('width', w)
.attr('height', h);
var letters = svg.selectAll('text').data(input);
letters.enter().append('text').text(String);
reset();
function reset() {
letters.attr('y', h - 80)
.attr('x', w + 20)
.style('font-size', '32px');
var duration = 1000;
var delay = duration * 0.7;
letters.transition()
.duration(duration)
.delay(function(d,i) { return i * delay; })
.attr('x', w/2)
.style('font-size', '500px')
.each('end', function() {
d3.select(this).transition().duration(duration)
.attr('x', -12)
.style('font-size', '16px');
});
setTimeout(reset, delay * input.length + duration);
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment