<div class="container">
<div>
<button type="button" class="btn-prev">Previous page</button>
[<span class="page-current">1</span> of <span class="page-total">-</span>]
<button type="button" class="btn-next">Next page</button>
</div>
<div>
State: <i class="page-state">read</i>, orientation: <i class="page-orientation">landscape</i>
</div>
</div>
<div class="container">
<div class="flip-book" id="demoBookExample">
<div class="page page-cover page-cover-top" data-density="hard">
<div class="page-content">
<h2>BOOK TITLE</h2>
</div>
</div>
<div class="page">
<div class="page-content">
<h2 class="page-header">Page header 1</h2>
<div class="page-image" style="background-image: url(images/html/1.jpg)"></div>
<div class="page-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna. Aliquam ac nulla rhoncus, accumsan eros sed, viverra enim. Pellentesque non justo vel nibh sollicitudin pharetra suscipit ut ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna.</div>
<div class="page-footer">2</div>
</div>
</div>
<!-- PAGES .... -->
<div class="page">
<div class="page-content">
<h2 class="page-header">Page header - 15</h2>
<div class="page-image" style="background-image: url(images/html/7.jpg)"></div>
<div class="page-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna. Aliquam ac nulla rhoncus, accumsan eros sed, viverra enim. Pellentesque non justo vel nibh sollicitudin pharetra suscipit ut ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna.</div>
<div class="page-footer">16</div>
</div>
</div>
<div class="page">
<div class="page-content">
<h2 class="page-header">Page header - 16</h2>
<div class="page-image" style="background-image: url(images/html/8.jpg)"></div>
<div class="page-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna. Aliquam ac nulla rhoncus, accumsan eros sed, viverra enim. Pellentesque non justo vel nibh sollicitudin pharetra suscipit ut ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna.</div>
<div class="page-footer">17</div>
</div>
</div>
<div class="page page-cover page-cover-bottom" data-density="hard">
<div class="page-content">
<h2>THE END</h2>
</div>
</div>
</div>
</div>
import {PageFlip} from 'page-flip';
document.addEventListener('DOMContentLoaded', function() {
const pageFlip = new PageFlip(
document.getElementById("demoBookExample"),
{
width: 550, // base page width
height: 733, // base page height
size: "stretch",
// set threshold values:
minWidth: 315,
maxWidth: 1000,
minHeight: 420,
maxHeight: 1350,
maxShadowOpacity: 0.5, // Half shadow intensity
showCover: true,
mobileScrollSupport: false // disable content scrolling on mobile devices
}
);
// load pages
pageFlip.loadFromHTML(document.querySelectorAll(".page"));
document.querySelector(".page-total").innerText = pageFlip.getPageCount();
document.querySelector(
".page-orientation"
).innerText = pageFlip.getOrientation();
document.querySelector(".btn-prev").addEventListener("click", () => {
pageFlip.flipPrev(); // Turn to the previous page (with animation)
});
document.querySelector(".btn-next").addEventListener("click", () => {
pageFlip.flipNext(); // Turn to the next page (with animation)
});
// triggered by page turning
pageFlip.on("flip", (e) => {
document.querySelector(".page-current").innerText = e.data + 1;
});
// triggered when the state of the book changes
pageFlip.on("changeState", (e) => {
document.querySelector(".page-state").innerText = e.data;
});
// triggered when page orientation changes
pageFlip.on("changeOrientation", (e) => {
document.querySelector(".page-orientation").innerText = e.data;
});
});
.flip-book {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
display: none;
background-size: cover;
}
.page {
padding: 20px;
background-color: hsl(35, 55, 98);
color: hsl(35, 35, 35);
border: solid 1px hsl(35, 20, 70);
overflow: hidden;
.page-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
.page-header {
height: 30px;
font-size: 100%;
text-transform: uppercase;
text-align: center;
}
.page-image {
height: 100%;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
.page-text {
height: 100%;
flex-grow: 1;
font-size: 80%;
text-align: justify;
margin-top: 10px;
padding-top: 10px;
box-sizing: border-box;
border-top: solid 1px hsl(35, 55, 90);
}
.page-footer {
height: 30px;
border-top: solid 1px hsl(35, 55, 90);
font-size: 80%;
color: hsl(35, 20, 50);
}
}
&.--left { // for left page (property will be added automatically)
border-right: 0;
box-shadow: inset -7px 0 30px -7px rgba(0, 0, 0, 0.4);
}
&.--right { // for right page (property will be added automatically)
border-left: 0;
box-shadow: inset 7px 0 30px -7px rgba(0, 0, 0, 0.4);
.page-footer {
text-align: right;
}
}
&.hard { // for hard page
background-color: hsl(35, 50, 90);
border: solid 1px hsl(35, 20, 50);
}
&.page-cover {
background-color: hsl(35, 45, 80);
color: hsl(35, 35, 35);
border: solid 1px hsl(35, 20, 50);
h2 {
text-align: center;
padding-top: 50%;
font-size: 210%;
}
&.page-cover-top {
box-shadow: inset 0px 0 30px 0px rgba(36, 10, 3, 0.5), -2px 0 5px 2px rgba(0, 0, 0, 0.4);
}
&.page-cover-bottom {
box-shadow: inset 0px 0 30px 0px rgba(36, 10, 3, 0.5), 10px 0 8px 0px rgba(0, 0, 0, 0.4);
}
}
}