Slider de pantalla dividida interactiva con JavaScript y CSS3

Vista prévia

Descripción

Un deslizador de pantalla dividida creado usando JavaScript y CSS que se puede utilizar para < a href = "https://wikicss.com/tag/image-comparison/" > compara dos imágenes diferentes con un deslizador interactivo sesgado.

Funcionamiento

Cree el código HTML para el control deslizante de la pantalla dividida.

<section id="wrapper" class="skewed">

<div class="layer bottom">


<div class="content-wrap">



<div class="content-body">




<h1>Before</h1>




<p>





<div>Description</div>




</p>



</div>



<img src="img/a1.jpg" alt="Before">


</div>

</div>


<div class="layer top">


<div class="content-wrap">



<div class="content-body">




<h1>After</h1>




<p>





<div>Description</div>




</p>



</div>



<img src="img/a2.jpg" alt="After">


</div>

</div>

<div class="handle"></div>
</section>

Los principales estilos CSS/CSS3

#wrapper {

position: relative;

width: 100%;

min-height: 55vw;

overflow: hidden;
}

.layer {

position: absolute;

width: 100vw;

min-height: 55vw;

overflow: hidden;
}

.layer .content-wrap {

position: absolute;

width: 100vw;

min-height: 55vw;
}

.layer .content-body {

color: #fff;

width: 25%;

position: absolute;

top: 50%;

text-align: center;

transform: translateY(-50%);
}

.layer img {

position: absolute;

width: 35%;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);
}

.layer h1 { font-size: 2em; }

.bottom {

background: #222;

z-index: 1;
}

.bottom .content-body { right: 5%; }

.bottom h1 { color: #FDAB00; }

.top {

background: #EEE;

color: #222;

z-index: 2;

width: 50vw;
}

.top .content-body {

left: 5%;

color: #222;
}

El CSS para el mango del deslizador sesgado.

.handle {

position: absolute;

height: 100%;

display: block;

background-color: #FDAB00;

width: 5px;

top: 0;

left: 50%;

z-index: 3;
}

.skewed .handle {

top: 50%;

transform: rotate(30deg) translateY(-50%);

height: 200%;

transform-origin: top;
}

.skewed .top {

transform: skew(-30deg);

margin-left: -1000px;

width: calc(50vw + 1000px);
}

.skewed .top .content-wrap {

transform: skew(30deg);

margin-left: 1000px;
}