CSS3 Split Screen Moving Slider

css3-split-screen-moving-slider.markdown

CSS3 Split Screen Moving Slider

A Pen by Marc Ucman on CodePen.

License.

index.html

<div id="wrapper">
  <div class="layer left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/d/d6/CathedralofLearningLawinWinter.jpg" alt="winter"/>
  </div>
  
  <div class="layer right">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/34/Rub_al_Khali_002.JPG" alt="desert"/>
  </div>
  
  <div class="handle"></div>
  
</div>

script.js

document.addEventListener('DOMContentLoaded', function(){
  let wrapper = document.getElementById('wrapper');
  let topLayer = wrapper.querySelector('.left');
  let handle = wrapper.querySelector('.handle');
  let delta = 0;

  
  wrapper.addEventListener('mousemove', function(e){
    delta = (e.clientX);
  
    handle.style.left = e.clientX + 'px';

    topLayer.style.width= e.clientX + 'px';
  });
});

style.css

body {
  padding: 0;
  margin: 0;
}

#wrapper {
  position: relative;
  width: 100%;
  min-height: 70vw;
  overflow: hidden;
}

.layer {
  position: absolute;
  width: 100vw;
  min-height: 70vw; /* same as wrapper */
  max-height: 100%;
  overflow: hidden;
}

.layer .content-body {
  width: 25%;
  position: absolute;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
}

.layer img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  contain: cover;
}

.left {
  background: #222;
  z-index: 1;
}

.handle {
  position: absolute;
  height: 100%;
  display: block;
  background-color: blue;
  width: 5px;
  top: 0;
  left: 50%;
  z-index: 3;
}