#banner-wrapper.banner-wrapper
  .banner.design
    .banner-content

  .banner.dev
    .banner-content

body {
  margin: 0;
  padding: 0;

  .banner-wrapper {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden; background:red;
  }

  .banner {
    position: absolute;
    overflow: hidden;

    &.dev {
      margin-left: -500px;
      width: calc(50vw + 500px);
      .banner-content {
        margin-left: 500px; background:black;
      }
    }
    .banner-content {
      height: 400px;
    }
    img {
      width: 100vw;
    }
  }
}

document.addEventListener('DOMContentLoaded', function(){
    let banner = document.getElementById('banner-wrapper');
    let devLayer = banner.querySelector('.dev');
    let delta = 0;

    banner.addEventListener('mousemove', function(e){
        delta = (e.clientX - window.innerWidth / 2) * 0.5;
        devLayer.style.width = e.clientX + 500 + delta + 'px';
    });
})