Comparison Slider (Before-After)

HTML

<body>
<!-- partial:index.partial.html -->
<div class="slider-wrapper">
  <div class="past">Interior</div>
  <div class="future">3D</div>
  <div class="before-wrapper">
    <div class="after-wrapper">

      <div class="after-image"></div>
    </div>
  </div>
  <div class="comparison-slider"></div>
</div>
<!-- partial -->
  <script src='https://code.jquery.com/jquery-2.1.4.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

body{
  margin:0;
  font-family: open sans;
}

.slider-wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
}

.slider-wrapper:hover { cursor: crosshair;; }

.comparison-slider {

}

.before-wrapper {
  display: block;
  overflow: hidden;
  width: auto;
  height: 100%;
  position: relative;
  background: url("#") no-repeat center center #111111;
  background-size: cover;
}

.before-wrapper:before {
  display: block;
  content: '';
  width: 100%;
  height:100%;

}

.after-wrapper, .after-image {

}

.after-wrapper {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
}

.after-image {
  display: block;
  width: auto;
  height: 100%;
  position: relative;
-webkit-transform: translateX(-50%);
61
  transform: translateX(-50%);

  background: url("#") no-repeat center center #efefef;
  background-size: cover;



}

.past, .future{
  padding: 40px;
  color:#fff;
  text-transform:uppercase;
  font-size:20px;
  /* text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7); */
  font-weight:800;
  z-index:10;
}

.past {
 position: absolute;
 display: block;
 bottom: 0px;
 left:0px;
 color:#111;
}

.you {
  width: 200px;
  height: 200px;
 position: absolute;
 display: block;
 right:0px;
 left: 0px;
 z-index:999;
 background: red;
}

.future {
 position: absolute;
 display: block;
 bottom: 0px;
 right:0px;
}

JavaScript

(function($){
$(function(){
  $('.before-wrapper').on( "mousemove", function(e) {
    var offsets = $(this).offset();
    var fullWidth = $(this).width();
    var mouseX = e.pageX - offsets.left;

    if (mouseX < 0) { mouseX = 0; }
    else if (mouseX > fullWidth) { mouseX = fullWidth }


    $(this).parent().find('.comparison-slider').css({
      left: mouseX,
      transition: 'ease-out'
    });
    $(this).find('.after-wrapper').css({
      transform: 'translateX(' + (mouseX) + 'px)',
      transition: 'all 1s'
    });
    $(this).find('.after-image').css({
      transform: 'translateX(' + (-1*mouseX) + 'px)',
      transition: 'all 1s'
    });
  });
  $('.slider-wrapper').on( "mouseleave", function() {
    $(this).parent().find('.comparison-slider').css({
      left: '50%',
      transition: 'all .3s'
    });
    $(this).find('.after-wrapper').css({
      transform: 'translateX(50%)',
      transition: 'all .3s'
    });
    $(this).find('.after-image').css({
      transform: 'translateX(-50%)',
      transition: 'all .3s'
    });
  });

});
})(jQuery);