Código de JavaScript - Mover una cortina por encima de una imagen

Pos: 7

Val: 606

Ha mantenido su posición en JavaScript (en relación al último mes)

Mover una cortina por encima de una imagen

JavaScript

Publicado el 16 de Abril del 2021 por Info (100 códigos)

1.167 visualizaciones desde el 16 de Abril del 2021

Este código permite sobreponer parte de una imagen encima de la otra, y con el ratón mover parte de la imagen superior sobre la imagen inferior.

cortina-por-encima-imagen

Para este efecto se utilizan dos imágenes, la que esta encima y la que se encuentra debajo, y pulsando sobre la imagen o arrastrando el ratón, podemos descubrir mas o menos la imagen inferior.
El encargado de crear este efecto es el estilo clip-path https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Para el ejemplo, he utilizado una imagen a color, y la misma imagen en escala de grises para visualizar el efecto.

1

Publicado el 16 de Abril del 2021

gráfica de visualizaciones de la versión: 1

1.168 visualizaciones desde el 16 de Abril del 2021

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style>

* {

        box-sizing: border-box;

    #images {

        width:400px;

        height:225px;

        position: relative;

        cursor:col-resize;

    #images>img {

        position: absolute;

        top:0;

    #images>img:nth-child(2) {

        clip-path:inset(0 0 0 50%);

    #images>span {

        position: relative;

        display: inline-block;

        height:100%;

        left:50%;

        border-right:1px solid white;

    </style>

</head>

<body>

<div id="images">

    <img src="paisaje1.jpg">

    <img src="paisaje2.jpg">

    <span></span>

</div>

</body>

</html>

<script>

const img2=document.querySelectorAll("img")[1];

const image=document.getElementById("images");

const line=image.querySelector("span");

let clicked=false;

/**

 * Evento que se ejecuta cuando pulsamos el mouse

*/

function down(e) {

    // activamos la variable clicked a true

    clicked=true;

    move(e);

    e.preventDefault();

/**

 * Evento que se ejecuta cuando pulsamos el mouse y cuando lo movemos

*/

function move(e) {

    // Si hemos clicado

    if (clicked==true && e.offsetX) {

        // movemos la linea

        line.style.left=e.offsetX+"px";

        // modificamos el clipPath de la segunda imagen

        img2.style.clipPath="inset(0 0 0 "+e.offsetX+"px)";

/**

 * Evento que se ejecuta cuando soltamos el mouse

*/

 function up(e) {

    // activamos la variable clicked a false

    clicked=false;

// Creamos un evento para cuando pulsamos el mouse, cuando

// lo movemos y para cuando lo soltamos

image.onmousedown=down;

image.onmousemove=move;

image.onmouseup=up;

</script>

Comentarios sobre la versión: 1 (0)

No hay comentarios

Comentar la versión: 1

http://lwp-l.com/s7013

Juego del pong en JavaScript

Determinar si un valor es numérico o un objeto Number()

Código de JavaScript - Mover una cortina por encima de una imagen

1

Comentarios sobre la versión: 1 (0)

Comentar la versión: 1

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.