<!DOCTYPE html>
<head>
<style>
.div { width:200px;
height:200px;
border:1px solid;
display: inline-block;
overflow: hidden;
position: relative;
}
.imagen { background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sass-logo.png);
}
.cortina { width:100%;
height:100%;
position:absolute;
background-color: grey;
left:100%;
display: flex;
justify-content: center;
align-items: center;
color:white;
font-weight: bold;
}
.cortina.izquierda { top:0;
animation: deIzquierda 0.3s linear both;
}
.cortina.derecha { top:0;
animation: deDerecha 0.3s linear both;
}
.cortina.superior { left:0;
animation: deSuperior 0.3s linear both;
}
.cortina.inferior { left:0;
animation: deInferior 0.3s linear both;
}
@keyframes deIzquierda { from {left:-100%} to {left:0px}; }
@keyframes deDerecha { from {left:100%} to {left:0px}; }
@keyframes deSuperior { from {top:-100%} to {top:0px}; }
@keyframes deInferior { from {top:100%} to {top:0px}; }
</style>
</head>
<body>
<h1>Titulo</h1>
<div class="div imagen"><div class='cortina'>Texto de prueba</div></div>
<div class="div"><div class='cortina'></div></div>
</body>
</html>
<script>
document.querySelectorAll(".div").forEach(el => el.addEventListener("mouseover", entrar));document.querySelectorAll(".div").forEach(el => el.addEventListener("mouseleave", salir));
function entrar(e) { const cortina=e.target.querySelector(".cortina"); if (cortina) { const x=e.offsetX<e.target.offsetWidth-e.offsetX ? e.offsetX : e.target.offsetWidth-e.offsetX;
const y=e.offsetY<e.target.offsetHeight-e.offsetY ? e.offsetY : e.target.offsetHeight-e.offsetY;
if (x<y) { // horizontal cortina.classList.add(e.offsetX<e.target.offsetWidth-e.offsetX ? "izquierda" : "derecha");
} else { // vertical cortina.classList.add(e.offsetY<e.target.offsetHeight-e.offsetY ? "superior" : "inferior");
}
}
}
function salir(e) { const cortina=e.target.querySelector(".cortina"); if (cortina) { cortina.classList.remove("izquierda"); cortina.classList.remove("derecha"); cortina.classList.remove("superior"); cortina.classList.remove("inferior"); }
}
</script>
Crear cuenta
Comentarios sobre la versión: 1 (1)
Es de los que entienden los Navegadores. Incluso yo.
;-) Gracias por tus aportes.