Categories
#SVG JavaScript Web development

Before & After – how to compare two images with JavaScript?

Today you’ll learn how to create a slider that compares two images.

before and after
Do you like this image? Check more images in the store.

Animation(move the slider to compare images):

*animation opened in the Safari browser.
To see the live output click here.

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add JavaScript

Step1.

Add HTML

Add your images:

<div class="img-comp-container">
  <div class="img-comp-img">
    <img src="https://lenadesign.org/wp-content/uploads/2020/08/makeup.jpg" width="640" height="480">
  </div>
  <div class="img-comp-img img-comp-overlay">
    <img src="https://lenadesign.org/wp-content/uploads/2020/08/no-makeup.jpg" width="640" height="480">
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background, and the container:

body {
  background-color: #eae2b7;
  display: flex; 
  align-items: center;
  justify-content: center;
  height: 100vh; 
}

.img-comp-container {
  left:-50px;
  position: relative;
  height: 480px; 
  width: 640px;
  border: 10px solid #e63946;
}

Set the position of the images:

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow:hidden;
}

.img-comp-img img {
  display:block;
  vertical-align:middle;
}

Style the slider:

.img-comp-slider {
  position: absolute;
  cursor: ew-resize;
  width: 3px;
  height: 480px;
  background-color: white;
  color: white;
}

.img-comp-slider:after {
  content:"";
  position: absolute;
  top: 240px;
  left:-40px;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 40px solid #48bfe3;
  border-bottom: 30px solid transparent;  
}

.img-comp-slider:before {
  content:"";
  position: absolute;
  top: 240px;
  left:3px;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-left: 40px solid #48bfe3;
  border-bottom: 30px solid transparent;  
  
}

.img-comp-slider:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2); 
}

Step3.

Add JavaScript

function initComparisons() {
  var x, i;
  x = document.getElementsByClassName("img-comp-overlay");
  for (i = 0; i < x.length; i++) {
    compareImages(x[i]);
  }
  function compareImages(img) {
    var slider, img, clicked = 0, w, h;
    w = img.offsetWidth;
    h = img.offsetHeight;
    img.style.width = (w / 2) + "px";
    
    /*slider:*/
    slider = document.createElement("DIV");
    slider.style.zIndex = "10";
    slider.setAttribute("class", "img-comp-slider");
    img.parentElement.insertBefore(slider, img);
    slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
    slider.addEventListener("mousedown", slideReady);
    window.addEventListener("mouseup", slideFinish);
    slider.addEventListener("touchstart", slideReady);
    window.addEventListener("touchend", slideFinish);
    function slideReady(e) {
      
      e.preventDefault();
      clicked = 1;
      window.addEventListener("mousemove", slideMove);
      window.addEventListener("touchmove", slideMove);
    }
    function slideFinish() {
      clicked = 0;
    }
    function slideMove(e) {
      var pos;
      if (clicked == 0) return false;
      pos = getCursorPos(e)
      if (pos < 0) pos = 0;
      if (pos > w) pos = w;
      slide(pos);
    }
    function getCursorPos(e) {
      var a, x = 0;
      e = e || window.event;
      a = img.getBoundingClientRect();
      x = e.pageX - a.left;
      x = x - window.pageXOffset;
      return x;
    }
    function slide(x) {
      img.style.width = x + "px";
      slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
    }
  }
}

initComparisons();

To see the live output check my Codepen.

Enjoy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *