<div class="scroll-reveal">
  <div class="scroll-reveal__img">
    <img src="https://raw.githubusercontent.com/supahfunk/supah-codepen/master/halloween/mask-2.jpg">
  </div>
  <div class="scroll-reveal__img">
    <img src="https://raw.githubusercontent.com/supahfunk/supah-codepen/master/halloween/mask-1.jpg">
  </div>
</div>

* {
  box-sizing: border-box;
  user-select: none;
}

html,
body {
  height: 100%;
  background: #000;
  overflow: hidden;
}

.scroll-reveal {
  position: relative;
  margin: 40px auto;
  width: 449px;
  
  &__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 130%;
    opacity: 1;
    display: flex;
    
    img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    
    &.ready {
      img {
        display: none;
      }
      
      div {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background-repeat: no-repeat;
        opacity: 1;
        transform: none;
        transform-origin: center;
        transition: opacity .4s ease-in-out .01s, transform .4s ease-in-out;
        
        &.hover {
          transform: scale(1.5, 1.1);
          opacity: 0;
        }
        
        &:hover {
          transform: scale(1.1);
        }
      }
    }
  }
}

const slices = 30;
const images = [].slice.call(document.querySelectorAll('.scroll-reveal__img'));
img = images[1];
img.classList.add('ready');
const bg = img.querySelector('img').getAttribute('src');

for (i = 0; i < slices; i++) {
  const div = document.createElement('div');
  div.style.backgroundImage = `url(${bg})`;
  div.style.backgroundSize = `${img.clientWidth}px`;
  console.log(img.clientWidth)
  div.style.backgroundPosition = `${100 / slices * i}%`;
  div.style.width = `${101 / slices}%`;
  div.style.left = `${100 / slices * i}%`;
  img.appendChild(div);
}

const divs = img.querySelectorAll('div');

['mousemove', 'touchmove', 'touchstart'].forEach(ev => {
  document.addEventListener(ev, e => {
  console.log(e);
    let x = e.pageX || e.clientX || e.touches[0].clientX;
    
    divs.forEach(div => {
      if (x > div.getBoundingClientRect().x + div.clientWidth) {
        div.classList.add('hover');
      } else {
        div.classList.remove('hover');
      }
    });

  }, false);  
});