Comparación de imagen diagonal interactiva con JavaScript

Vista prévia

Descripción

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

Funcionamiento

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

<div class='comparison-wrapper' id='comparison-wrapper'>

<div class='comparison design'>


<div class='comparison-content'>



<img src='before.jpg'>


</div>

</div>

<div class='comparison dev'>


<div class='comparison-content'>



<img src='after.jpg'>


</div>

</div>
</div>

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

body .comparison-wrapper {

position: relative;

width: 100%;

height: 400px;

overflow: hidden;
}

body .comparison {

position: absolute;

overflow: hidden;
}

body .comparison.dev {

transform: skew(-30deg);

margin-left: -500px;

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

body .comparison.dev .comparison-content {

transform: skew(30deg);

margin-left: 500px;
}

body .comparison .comparison-content { height: 400px; }

body .comparison img { width: 100vw; }

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

document.addEventListener('DOMContentLoaded', function(){

let comparison = document.getElementById('comparison-wrapper');

let devLayer = comparison.querySelector('.dev');

let delta = 0;


comparison.addEventListener('mousemove', function(e){



delta = (e.clientX - window.innerWidth / 2) * 0.5;



devLayer.style.width = e.clientX + 500 + delta + 'px';

});
})