<div class="curtain">
<div class="wrap">
<div class="curtain-left"></div>
<div class="curtain-right"></div>
</div>
</div>
html,
body {
padding: 0;
margin: 0;
}
body {
height: 100vh;
background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
background-attachment: fixed;
background-size: cover;
}
.curtain {
width: 500px;
height: 300px;
border: 10px solid #000;
overflow: hidden;
position: relative;
margin: 1rem auto;
}
.curtain-left,
.curtain-right {
position: absolute;
top: 0;
width: calc(50% + 1px);
height: 100%;
overflow: hidden;
transition: transform 5s ease;
}
.curtain-left {
left: 0;
transform: translateX(-100%);
}
.curtain-right {
right: 0;
transform: translateX(100%);
}
.reverse .curtain-left,
.reverse .curtain-right {
transform: translateX(0%);
}
.curtain-left:before,
.curtain-right:before {
content: "";
display: block;
width: 200%;
height: 100%;
background: url(https://picsum.photos/id/18/500/300) no-repeat;
background-size: cover;
}
.curtain-right:before {
position: absolute;
left: -100%;
top: 0;
}
/* this will break it
.wrap {
display: none;
position: relative;
width: 100%;
height: 100%;
}
.reverse .wrap {
display: block;
}
*/
/* use this instead */
.curtain:not(.show) .wrap {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
max-width: none;
min-width: 0;
}
.wrap {
position: relative;
width: 100%;
height: 100%;
}
const curtain = document.querySelector(".curtain");
curtain.addEventListener("click", reverseAnimation);
function reverseAnimation() {
curtain.classList.toggle("reverse");
curtain.classList.add("show");
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.