3 capa de imagen después/antes del deslizador de comparación

Vista prévia

Descripción

Un deslizador de comparación de imagen elegante que le permite comparar las diferencias entre las imágenes de 3 capas.

Funcionamiento

Agregue 3 imágenes junto con los controles deslizantes de comparación basados en SVG a la Página Web.

<div class="wrapper">

<div class="bottom">


<img src="1.jpg" draggable="false"/>

</div>

<div class="middle">


<img src="2.jpg" draggable="false"/>

</div>

<div class="scroller scroller-middle">


<svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#FFCCBC"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#FFCCBC"/></svg>

</div>

<div class="top">


<img src="3.jpg" draggable="false"/>

</div>

<div class="scroller scroller-top">


<svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#FFAB91"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#FFAB91"/></svg>

</div>
</div>

Los estilos CSS necesarios para la vista de comparación de imágenes.

/* Our wrapper */

.wrapper {

width: 690px;

height: 600px;

max-height: 100vh;

position: absolute;

left: 50%;

top: 50%;

transform: translate3d(-50%, -50%, 0);

overflow: hidden;

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/* Our image information */

.bottom, .middle, .top {

width: 100%;

height: 100%;

background-repeat: no-repeat;

background-color: white;

background-size: cover;

background-position: center;

position: absolute;

top: 0;

left: 0;

pointer-events: none;

overflow: hidden;
 &>img {
 height:100%;
}
}

.top { width: 125px; }

.scroller {

width: 50px;

height: 50px;

position: absolute;

left: 100px;

top: 50%;

transform: translateY(-50%);

border-radius: 50%;

background-color: #fff;

opacity: 0.9;

transition: opacity 0.12s ease-in-out;

pointer-events: auto;

cursor: pointer;

box-shadow: 3.5px 0px 7px rgba(100, 100, 100, 0.2);
}

.scroller-middle { margin-top: 25px; }

.scroller-top { margin-top: -25px; }

.scroller:hover { opacity: 1; }

.scrolling {

pointer-events: none;

opacity: 1;
 // z-index: 1;
}

.scroller__thumb {

width: 100%;

height: 100%;

border-radius: 50%;

padding: 7px;
}

.scroller:before, .scroller:after {

content: " ";

display: block;

width: 7px;

height: 9999px;

position: absolute;

left: 50%;

margin-left: -3.5px;

z-index: 30;

transition: 0.1s;

box-shadow: 3.5px 0px 7px rgba(100, 100, 100, 0.2);
}

.scroller:before { top: 49px; }

.scroller:after { bottom: 49px; }

/* If you want to cahnge the colors, make sure you change the fill in the svgs to match */

.scroller-middle>.scroller__thumb { border: 5px solid #FFCCBC; }

.scroller-middle:before, .scroller-middle:after { background: #FFCCBC; }

.scroller-top>.scroller__thumb { border: 5px solid #FFAB91; }

.scroller-top:before, .scroller-top:after { background: #FFAB91; }

El núcleo JavaScript para activar los reguladores de comparación de imágenes.

// I hope this over-commenting helps. Let's do this!
// Let's use the 'active' variable to let us know when we're using it
let active = false;

// First we'll have to set up our event listeners
// We want to watch for clicks on our scroller
document.querySelector('.scroller-middle').addEventListener('mousedown',function(){

active = "middle";

// Add our scrolling class so the scroller has full opacity while active

document.querySelector('.scroller-middle').classList.add('scrolling');
});
// We also want to watch the body for changes to the state,
// like moving around and releasing the click
// so let's set up our event listeners
document.body.addEventListener('mouseup',function(){

active = false;

document.querySelector('.scroller-middle').classList.remove('scrolling');
});
document.body.addEventListener('mouseleave',function(){

active = false;

document.querySelector('.scroller-middle').classList.remove('scrolling');
});
// We'll have to do the same for our top scroller
document.querySelector('.scroller-top').addEventListener('mousedown',function(){


active = "top";


document.querySelector('.scroller-top').classList.add('scrolling');
});
document.body.addEventListener('mouseup',function(){

active = false;

document.querySelector('.scroller-top').classList.remove('scrolling');
});
document.body.addEventListener('mouseleave',function(){

active = false;

document.querySelector('.scroller-top').classList.remove('scrolling');
});

// Let's figure out where their mouse is at
document.body.addEventListener('mousemove',function(e){

if (!active) return;

// Their mouse is here...

let x = e.pageX;

// but we want it relative to our wrapper

x -= document.querySelector('.wrapper').getBoundingClientRect().left;

// Okay let's change our state

scrollIt(x);
});

// Let's use this function
function scrollIt(x){

// Calculate our transform

let transform = Math.max(0,(Math.min(x,document.querySelector('.wrapper').offsetWidth)));

// we show all our bottom image but how much of our middle and top,

// that'll depend on what we're dragging

// if we're dragging the middle slider

if (active==="middle"){


document.querySelector('.middle').style.width = transform+"px";


document.querySelector('.scroller-middle').style.left = transform-25+"px";


// if we're using scroller-middle, middle must always be to the right of top


if (document.querySelector('.scroller-top').getBoundingClientRect().left>document.querySelector('.scroller-middle').getBoundingClientRect().left-5){



document.querySelector('.top').style.width = transform-5+"px";



document.querySelector('.scroller-top').style.left = transform-30+"px";


}

}

// if we're dragging the top slider

if (active==="top"){


document.querySelector('.top').style.width = transform+"px";


document.querySelector('.scroller-top').style.left = transform-25+"px";


// if we're using scroller-top, top must always be to the left


if (document.querySelector('.scroller-top').getBoundingClientRect().left>document.querySelector('.scroller-middle').getBoundingClientRect().left-5){



document.querySelector('.middle').style.width = transform+5+"px";



document.querySelector('.scroller-middle').style.left = transform-20+"px";


}

}
}

// Let's set our opening state based off the width,
 // we want to show a bit of both images so the user can see what's going on
active = "middle";
scrollIt(460);
active = "top";
scrollIt(230);
active = false;


// And finally let's repeat the process for touch events
// first our middle scroller...
document.querySelector('.scroller-middle').addEventListener('touchstart',function(){


active = "middle";


document.querySelector('.scroller-middle').classList.add('scrolling');
});
document.body.addEventListener('touchend',function(){


active = false;


document.querySelector('.scroller-middle').classList.remove('scrolling');
});
document.body.addEventListener('touchcancel',function(){


active = false;


document.querySelector('.scroller-middle').classList.remove('scrolling');
});

// then scroller top, our second scroller
document.querySelector('.scroller-top').addEventListener('touchstart',function(){


active = "top";


document.querySelector('.scroller-top').classList.add('scrolling');
});
document.body.addEventListener('touchend',function(){


active = false;


document.querySelector('.scroller-top').classList.remove('scrolling');
});
document.body.addEventListener('touchcancel',function(){


active = false;


document.querySelector('.scroller-top').classList.remove('scrolling');
});

document.querySelector('.wrapper').addEventListener('touchmove',function(e){


if (!active) return;


e.preventDefault();


let x = e.touches[0].pageX;


x -= document.querySelector('.wrapper').getBoundingClientRect().left;


scrollIt(x);
});