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

Imágen de perfil
Val: 601
Bronce
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mover una cortina por encima de una imagengráfica de visualizaciones


JavaScript

Publicado el 16 de Abril del 2021 por Info (99 códigos)
314 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 2021gráfica de visualizaciones de la versión: 1
314 visualizaciones desde el 16 de Abril del 2021
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!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

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

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

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s7013