Skip to content

Instantly share code, notes, and snippets.

@tarasglek

tarasglek/page-flip.html

Created September 3, 2020 05:23
Show Gist options
  • Save tarasglek/ebb1e5a25950e35169853ba734c146ce to your computer and use it in GitHub Desktop.
Save tarasglek/ebb1e5a25950e35169853ba734c146ce to your computer and use it in GitHub Desktop.
Download ZIP
Raw
page-flip.html
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/page-flip/dist/js/page-flip.browser.min.js"></script>
<div class="flip-book" id="example">
<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(https://pbs.twimg.com/media/Eg9lM6wXsAAGEL3?format=jpg&name=small)"></div>
<div class="page-text">Page Content 1</div>
<div class="page-footer">2</div>
</div>
</div>
<div class="page">
<div class="page-content">
<h2 class="page-header">Page Header 2</h2>
<div class="page-image" style="background-image: url(https://pbs.twimg.com/ad_img/1301135341387001861/e2ALFu5H?format=jpg&name=small)"><p>1</p><p>2</p><p>3</p><p></p></div>
<div class="page-text">Page Content 2</div>
<div class="page-footer">3</div>
</div>
</div>
... more pages here ...
<div class="page page-cover page-cover-bottom" data-density="hard">
<div class="page-content">
<h2>THE END</h2>
</div>
</div>
</div>
<script>
// Browser
const pageFlip = new St.PageFlip(
document.getElementById("example"),
{
width: 400, // required parameter - base page width
height: 600 // required parameter - base page heighttions here
}
);
pageFlip.loadFromHTML(document.querySelectorAll('.page'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment