Background Mouse-Position Slider

background-mouse-position-slider.markdown

Background Mouse-Position Slider

A Pen by Brett McCaffray on CodePen.

License.

index.haml

#banner-wrapper.banner-wrapper
  .banner.design
    .banner-content
      %img{:src => 'https://goo.gl/L35vUt'}
  .banner.dev
    .banner-content
      %img{:src => 'https://goo.gl/JDWFxe'}

script.js

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';
    });
})

style.scss

body {
  margin: 0;
  padding: 0;
  
  .banner-wrapper {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
  }
  
  .banner {
    position: absolute;
    overflow: hidden;
    
    &.dev {
      transform: skew(-30deg);
      margin-left: -500px;
      width: calc(50vw + 500px);
      .banner-content {
        transform: skew(30deg);
        margin-left: 500px;
      }
    }
    .banner-content {
      height: 400px;
    }
    img {
      width: 100vw;
    }
  }
}