Это то, что мы собираемся построить.

Первое, что придет вам в голову, это зачем создавать что-то подобное, если вы можете поместить два изображения рядом.

А почему бы не? Давайте сделаем что-нибудь крутое для наших пользователей.

Хорошо, хорошо, я знаю, что вам нужен код прямо сейчас, поэтому, не теряя времени, давайте перейдем непосредственно к коду.

Таким образом, два изображения, которые будут сравниваться в любом таком случае, будут входным изображением и выходным изображением.

Следовательно, первое, что нам нужно, это иметь возможность помещать выходное изображение поверх входного. Это немного просто, если вы знаете основы CSS.

Я использую SVELTE для этого небольшого проекта, но вы можете использовать любой другой фреймворк, который вам удобен.

Поместим два изображения в div.

<div class="images-container">
 <img id="input-image" src="..." alt="..." />
 <img id="output-image" src="..." alt="..." />
</div>

Теперь нам нужно разместить выходное изображение поверх входного. Для этого я использовал следующий код CSS.

#output-image {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
 }

Наша первая задача выполнена. Теперь нам нужно обрезать выходное изображение справа. Для этого мы будем использовать свойство CSS clip. В котором с помощью rect (‹top›, ‹right›, ‹bottom›, ‹left›) мы можем указать значения для обрезки изображения.

#output-image {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  clip: rect(0px, 300px, 500px, 0px); <-- Added this line
 }

Как видите, с его помощью мы можем обрезать изображение.

Осталось изменить это значение при наведении курсора мыши на изображения.

Для этого svelte предоставляет удобную опцию on: mousemove, которую мы будем использовать в div, который содержит оба изображений.

<div class="images-container" on:mousemove={handleMousemove}>
  ...
</div>

on: mousemove не предоставляет положение мыши относительно компонента, поэтому мы должны вычесть левое положение компонента из глобального положения.

После вычитания мы можем установить значение для свойства clip с помощью javascript, чтобы изменить его в реальном времени. Вот функция, которую я использовал.

let mousePosition = 0;
function handleMousemove(event) {
  var rect = event.target.getBoundingClientRect();
  mousePosition = event.clientX - rect.left;
  const outputImage = document.getElementById("output-image");
  outputImage.style.clip = `rect(0px, ${mousePosition}px, 450px, 0px)`;
 }

Наконец, чтобы он выглядел немного лучше, я использовал следующий CSS для изменения курсора.

.images-container {
  cursor: grabbing;
 }

Совмещая все это и бегом, вы получите вот такой результат.

Вы можете настроить его в соответствии с вашими потребностями и использовать.

Вот полный код:

<script>
 let mousePosition = 0;
function handleMousemove(event) {
  var rect = event.target.getBoundingClientRect();
  mousePosition = event.clientX - rect.left;
  const outputImage = document.getElementById("output-image");
  outputImage.style.clip = `rect(0px, ${mousePosition}px, 450px, 0px)`;
 }
</script>
<div class="images-container" on:mousemove={handleMousemove}>
  <img id="input-image" src="..." alt=""/>
  <img id="output-image" src="..." alt=""/>
</div>
<style>
 .images-container {
  cursor: grabbing;
 }
#output-image {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
 }
</style>

Ссылка на проект Github: https://github.com/jagrut-18/image-comparision-slider

Спасибо, что дочитали до этого момента. Не забудьте оставить комментарий для любых предложений и 👏 для этой истории.