Flex-box Image Nav Material

by amindunited

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<div class="document">
  <header>
    <button id="navToggle"class="closed">
      =
    </button>
    <h1 class="siteTitle">
      My Site
    </h1>
  </header>
  <nav class="closed">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </nav>
  <main>
    <section>
      <article class="flex-container">
        <div class="display_block"></div>
        <div class="display_block"></div>
        <div class="display_block"></div>
        <div class="display_block"></div>
        <div class="display_block"></div>
        <div class="display_block"></div>
        <div class="display_block"></div>
        <div class="display_block"></div>
      </article>
    </section>
    <section>
      <article>
        <header>
          <h2>
            Article Title
          </h2>
        </header>
        <section>
        Kombucha DIY crucifix, biodiesel kickstarter polaroid small batch migas narwhal mumblecore. Cardigan small batch venmo, fashion axe bicycle rights intelligentsia literally bitters PBR&B yr cred street art. Shabby chic keffiyeh before they sold out, venmo ennui next level post-ironic meh +1 farm-to-table 90's literally single-origin coffee sriracha slow-carb. Wayfarers etsy pitchfork chambray artisan. Farm-to-table kinfolk williamsburg, stumptown craft beer viral art party before they sold out wayfarers yuccie. Ramps forage fingerstache next level put a bird on it, farm-to-table schlitz tote bag yr artisan XOXO. 8-bit microdosing synth, four dollar toast narwhal lomo chartreuse.
        </section>
      </article>
      <article>
        <header>
          <h2>
            Another Article
          </h2>
        </header>
        <section>
        Tilde fixie you probably haven't heard of them, tofu authentic four loko marfa sustainable migas kogi messenger bag retro kale chips...

CSS

.flex-container {
  display: flex;
  -webkit-flex-flow: row wrap;
}
.display_block {
  flex: 1;
  min-width: 100px;
  min-height: 100px;
  position: relative;
  touch-action: manipulation;
}
.display_block:hover {
  -webkit-filter: brightness(.85);
}
button:focus {
  outline: none;
}
.display_block .anim {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  overflow: hidden;
  top: 0px;
  left: 0px;
}
.display_block .anim .ripple {
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  left: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .25);
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 1;
}
.display_block.touched .anim .ripple {
  transition: width .800s ease-in-out, height .800s ease-in-out, opacity .800s ease-in-out;
  opacity: 0.5;
}
.display_block:nth-child(1) {
  background: url('http://placekitten.com/100/100') center no-repeat;
  background-size: 100%;
}

.display_block:nth-child(2) {
  background: url('http://placekitten.com/110/110') center no-repeat;
  background-size: 100%;
}

.display_block:nth-child(3) {
  background: url('http://placekitten.com/120/120') center no-repeat;
  background-size: 100%;
}

.display_block:nth-child(4) {
  background: url('http://placekitten.com/130/130') center no-repeat;
  background-size: 100%;
}

.display_block:nth-child(5) {
  background: url('http://placekitten.com/145/145') center no-repeat;
  background-size: 100%;
}

.display_block:nth-child(6) {
  background: url('http://placekitten.com/150/150') center no-repeat;
  background-size: 100%;
}

.display_block:nth-child(7) {
  background: url('http://placekitten.com/160/160') center no-repeat;
  background-size: 100%;
}

.display_block:nth-child(8) {
  background:...

JavaScript

var blocks = [].slice.call(document.querySelectorAll('.display_block'));
console.log('blocks', blocks);

blocks.map(function(element, index, array){
	addRippleListener (element);
});

var cumulativeOffset = function(element) {
  var top = 0, left = 0;
  do {
    top += element.offsetTop  || 0;
    left += element.offsetLeft || 0;
    element = element.offsetParent;
  } while(element);

  return {
    top: top,
    left: left
  };
};

function addRippleListener(elm) {
  elm.addEventListener("touchstart", function (e) {
  	addRipple(e);
    e.stopPropagation(); 
    e.preventDefault(); 
  });
  
  elm.addEventListener('mousedown', function(e){
  	addRipple(e);
  });
};

function addRipple (e) {
  var animDiv = document.createElement('div');
  animDiv.classList.add('anim');
  e.target.appendChild(animDiv);

  var rippleDiv = document.createElement('div');
  rippleDiv.classList.add('ripple');
  animDiv.appendChild(rippleDiv);

  //var animDiv = document.createElement('div');
  //e.target.appendChild(animDiv);

  var parentOffset = cumulativeOffset(e.target);
  console.log('click was ', e);
  rippleDiv.style.left = e.offsetX + 'px';// - (e.target.offsetWidth/2) ) + 'px';
  rippleDiv.style.top = e.offsetY + 'px';// - (e.target.offsetWidth/2) ) + 'px';
  //animDiv.style.width = ;
  var diameter = Math.max(e.target.offsetHeight, e.target.offsetWidth);
  /**
    *	The size of the circle needs to be the largest of the height and width
    * plus the distance that the click was from the center
    */
  var clickRadius;
  var parentCenterX = e.target.offsetWidth/2;
  var parentCenterY = e.target.offsetHeight/2;
  var clickX = e.offsetX;
  var clickY = e.offsetY;
  var xVal = parentCenterX - clickX;
  var yVal = parentCenterY - clickY;
  var radius = Math.sqrt((xVal*xVal) + (yVal * yVal));
  diameter += (radius)*2.5;
  console.log('radius ', radius, xVal, yVal);
  setTimeout(function() {

    setTimeout(function() {
      e.target.removeChild(animDiv);
     ...