Comparison

by Bouteille Dimitri

HTML

<div class="align">
  <div class="align-bis">
<div class="comparison">
	<figure class="comparison-before">
  <img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
    <figcaption class="comparison-label">
      Before
    </figcaption>
	</figure>

	<figure class="comparison-after" style="width:34%;">
     <div class="comparison-slider">
      <i class="material-icons">more_vert</i>
    </div>	
		<img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
 
        <figcaption class="comparison-label">
      After
    </figcaption>
	</figure>      


</div>

</div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

$primary : #03A9F4;
$grey : rgb(242,242,242);
$white : #fff;
$black: #333;

$borderColor : $black;
$borderWidth : 1px;
$borderTransition : 0.25s;
$borderBtnHeight: 42px;

//
// Default style
* {
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: $black;
  font-size: 15px;
  box-sizing: border-box;
}

.align{
  display: flex;
  background-color: rgb(250,250,250);
  &-bis{
    flex: 1;
    display:flex;
    justify-content: center;
    padding: 40px 0;
  }
  &.grey{
    background-color: rgb(245,245,245);
  }
}


$this : '.comparison';

#{$this}{
  width: 90%;
  position:relative;
  &-before {
    user-select: none;
    img{
      max-width: 100%;
      display: block;
    }
    #{$this}-label{
      right: 23px;
    }
  }
  &-label{
    position:absolute;
    bottom: 15px;
    color: $white;
    text-transform: uppercase;
    font-size: 14px;
  }
  &-after{  
    position:absolute;
    min-width: 22px;
    top:0;
    z-index: 5;
    bottom:0;
    left:0;
    overflow:hidden;
    img{
      top:0;
      left:0;
      position:absolute;
      height:100%;
      filter: grayscale(1);
      -ms-filter: grayscale(1);
      //user-select: none;
    }
    #{$this}-label{
      left: 23px;
    }
    
  }
  &-slider{
    //background-color: orange;
    margin-left: auto;
    height: 100%;
    position:relative;
    z-index: 20;
    width: 22px;
    display:flex;
    cursor: pointer;
    i{
      margin: auto;
      color: $white;
      text-align:center;
      user-select: none;
    }
    
  }
}

JavaScript

// Call & init
$(document).ready(function(){
  $('.comparison').each(function(){
    var cur = $(this);
    // Adjust the slider
    var width = cur.width()+'px';
    
    cur.find('.resize img').css('width', width);
    // Bind dragging events
    drags(cur.find('.comparison-slider'), cur.find('.comparison-after'), cur);
  });
});



function drags(dragElement, resizeElement, container) {
  
  // Initialize the dragging event on mousedown.
  dragElement.on('mousedown touchstart', function(e) {
    
    dragElement.addClass('draggable');
    resizeElement.addClass('resizable');
    
    // Check if it's a mouse or touch event and pass along the correct value
    var startX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;
    
    // Get the initial position
    var dragWidth = dragElement.outerWidth(),
        posX = dragElement.offset().left + dragWidth - startX,
        containerOffset = container.offset().left,
        containerWidth = container.outerWidth();
 
    // Set limits
    minLeft = containerOffset + 10;
    maxLeft = containerOffset + containerWidth - dragWidth - 10;
    
    // Calculate the dragging distance on mousemove.
    dragElement.parents().on("mousemove touchmove", function(e) {
      
      // Check if it's a mouse or touch event and pass along the correct value
      var moveX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;
      
      leftValue = moveX + posX - dragWidth;
      
      // Prevent going off limits
      if ( leftValue < minLeft) {
        leftValue = minLeft;
      } else if (leftValue > maxLeft) {
        leftValue = maxLeft;
      }
      
      // Translate the handle's left value to masked divs width.
      widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';
      
      // Set the new values for the slider and the handle. 
      // Bind mouseup events to stop dragging.
      $('.draggable').on('mouseup touchend touchcancel', function () {
       ...