Slider de comparación de imágenes mínimo en Pure JS

Vista prévia

Descripción

Compare dos imágenes diferentes (antes/después) con esta base de JavaScript/CSS < a href = "https://wikicss.com/tag/image-comparison/" > comparación de imagen Slider que reacciona al movimiento del ratón.

Funcionamiento

Cree el código HTML para el contenedor de comparación de imágenes.

<div class="image">

<div class="image__img"></div>

<div class="image__img"></div>
</div>

El CSS para el deslizador de comparación de imágenes.

body {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

height: 100vh;

background: #111;
}

.image {
 --width: 794px;
 --height: 446px;

position: relative;

width: var(--width);

height: var(--height);

overflow: hidden;
}

.image__img {

position: absolute;

height: 100%;

background: url("1.jpg");

background-size: var(--width) var(--height);
}

.image__img:first-child {

left: 0;

width: 100%;

background-position: center left;
}

.image__img:last-child {

right: 0;

width: calc(100% - var(--x, 50%));

background-position: center right;

-webkit-filter: grayscale(100%);

filter: grayscale(100%);

box-shadow: inset 2px 0 0 #111, -2px 0 0 #111;
}

El núcleo JavaScript.

'use strict';

document.querySelectorAll('.image').forEach(function (elem) {


var x = undefined,



width = undefined;


elem.onmouseenter = function () {



var size = elem.getBoundingClientRect();



x = size.x;


width = size.width;

};


elem.onmousemove = function (e) {



var horizontal = (e.clientX - x) / width * 100;



elem.style.setProperty('--x', horizontal + '%');

};
});