Html code
<!DOCTYPE html>
<html>
<head>
<style>
* { box-sizing: border-box; }
body {
/* or any other parent wrapper */
margin: 0;
display: flex;
width: 300px;
height: 100px;
font: 16px/1.4 sans-serif;
overflow: hidden;
}
.book {
display: flex;
margin: auto;
width: 300px;
/*1* let pointer event go trough pages of lower Z than .book */
pointer-events: none;
transform-style: preserve-3d;
transition: translate 1s;
translate: calc(min(var(--c), 1) * 50%) 0%;
/* DEMO ONLY: incline on the X axis for pages preview */
rotate: 1 0 0 30deg;
}
.page {
--thickness: 5;
/* PS: Don't go below thickness 0.4 or the pages might transpare */
flex: none;
display: flex;
width: 100%;
/*1* allow pointer events on pages */
pointer-events: all;
user-select: none;
transform-style: preserve-3d;
border: 1px solid #0008;
transform-origin: left center;
transition:
transform 1s,
rotate 1s ease-in calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 50ms);
translate: calc(var(--i) * -100%) 0px 0px;
transform: translateZ( calc((var(--c) - var(--i) - 0.5) * calc(var(--thickness) * 1px)));
rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg);
}
.page img {
width: 100%;
height: 100%;
object-fit: cover;
}
.front,
.back {
flex: none;
width: 100%;
padding: 2rem;
backface-visibility: hidden;
background-color: #fff;
/* Fix backface visibility Firefox: */
translate: 0px;
}
.back {
background-image: linear-gradient(to right, #fff 80%, #ddd 100%);
translate: -100% 0;
rotate: 0 1 0 180deg;
}
</style>
</head>
<body>
<div class="book">
<div class="page">
<div class="front">
<img src="https://i.imgur.com/HFc9fVL.jpeg/500/400" alt="Img 1">
</div>
<div class="back">
<img src="https://picsum.photos/500/400" alt="Img 1">
</div>
</div>
<div class="page">
<div class="front">
<img src="https://picsum.photos/500/400" alt="Img 1">
</div>
<div class="back">
<img src="https://picsum.photos/500/400" alt="Img 1">
</div>
</div>
<div class="page">
<div class="front">
<img src="https://picsum.photos/500/400" alt="Img 1">
</div>
<div class="back">
<img src="https://picsum.photos/500/400" alt="Img 1">
</div>
</div>
<div class="page">
<div class="front">
<img src="https://picsum.photos/500/400" alt="Img 1">
</div>
<div class="back">
<img src="https://picsum.photos/500/400" alt="Img 1">
</div>
</div>
<div class="page">
<div class="front">
<img src="https://picsum.photos/500/400" alt="Img 1">
</div>
<div class="back">
<img src="https://picsum.photos/500/400" alt="Img 1">
</div>
</div>
</div>
<script>
const flipBook = (elBook) => {
elBook.style.setProperty("--c", 0); // Set current page
elBook.querySelectorAll(".page").forEach((page, idx) => {
page.style.setProperty("--i", idx);
page.addEventListener("click", (evt) => {
const curr = evt.target.closest(".back") ? idx : idx + 1;
elBook.style.setProperty("--c", curr);
});
});
};
document.querySelectorAll(".book").forEach(flipBook);
</script>
</body>
</html>
No comments:
Post a Comment