Before & After

Before & After.markdown

Before & After

A module built for free lancing!

A Pen by Bryan Stoner on CodePen.

License.

index.jade

.before-and-after
  img.subject-before(src="https://www.primagames.com/media/images/guides/hero/pikmin-3-wallpaper-1.jpg")
  .subject-scraper
    img.subject-after(src="https://www.primagames.com/media/images/guides/hero/pikmin-3-wallpaper-1.jpg")

script.js

var subject = document.querySelector('.before-and-after');
var scraper = document.querySelector('.subject-scraper');
var after = document.querySelector('.subject-after');

var distance = (window.innerWidth - subject.clientWidth) / 2;
window.onresize = recalculateDistance;

var px = 0;
var touches = [];

subject.addEventListener('mousemove', dragScraper, false);
subject.addEventListener('touchmove', dragScraper, false);

function recalculateDistance() {

  distance = (window.innerWidth - subject.clientWidth) / 2;
  
}

function dragScraper(event) {
  
  px = event.clientX - distance;
  
  if(px == null) {
    touches = event.touches;
    px = touches[0].clientX - distance;
  }
  
  if(px < 0) {
    px = 0;
  }
  
  scraper.style.transform = 'translate(' + px + 'px, 0)';
  after.style.transform = 'translate(-' + px + 'px, 0)';
  
}

style.scss

/* ================
// Before and After
// ============= */

.before-and-after {
  position: relative;
  overflow: hidden;
  width: 75%;
  cursor: ew-resize;
  
  img {
    display: block;
    max-width: 100%;
  }
  
}

  .subject-before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
  }

  .subject-scraper {
    overflow: hidden;
    transform: translate(50%, 0);
    
    &:before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 20;
      height: 100%;
      width: .25em;
      content: '';
      background: #fff;
    }
    
  }
  
    .subject-after {
      transform: translate(-50%, 0);
      filter: grayscale(100%);
    }


/* ================
// Structure
// ============= */

html,
body {
  height: 100%;
}

  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }