50 odd exes

In this example below you will see how to do a 50 odd exes with some HTML / CSS and Javascript

Basically, this is just tutorial number 1of d3js.org. It's a wonderful library. Reading the explanations already gives you a myriad of ideas of what to do.

Thumbnail
This awesome code was written by potatoDie, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright potatoDie ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>50 odd exes</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <p>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/potatoDie/50-odd-exes-NPagbR */
body {
  background: black;
  margin: 10% 0 0;
  color: rgba(255, 255, 255, 0.95);
  overflow:hidden;
}
p {
  width:60%;
  margin: 0 auto;
  text-align: center;
  line-height: 80px;
  font-weight: 300;
} 

span {
  vertical-align: middle;
}

/*Downloaded from https://www.codeseek.co/potatoDie/50-odd-exes-NPagbR */
function randomInt(min, max){
  return Math.floor(min + Math.random()*(max + 1 - min));
}

(function draw () {
  // Create an array of ranged random length with numbers also random within a range
  var numbers = Array.apply(null, new Array(randomInt(10,50)))
    .map(function(){return randomInt(7, 400);});

  var xSpans = d3.select('p').selectAll('span')
    .data(numbers);

  xSpans.transition()
    .duration(1000)
    .ease('linear')
    .delay(function(d,i){return i*10;})
    .style('font-size', function(d){return d + "px";})

  xSpans
    .enter().append("span")
    .html(function(d,i){return i%Math.floor(window.innerWidth/200)===0 ? '<br/>' : 'x'})
    .transition()
    .duration(1000)
    .style('font-size', function(d){return d + "px";})

  xSpans
    .exit()
    .transition()
    .duration(800)
    .style('opacity', 0)
    .remove();

  setTimeout( draw, 1000 );
})();

Comments