How to add page flip animation to a given HTML content

  css, css-animations, html, javascript, jquery

I am trying to render a given HTML file in a book layout, with two columns and page flip animation.
The way I have implemented so far is to have horizontal scrolling with 2 columns and to turn page I scroll by screen width, it looks something like this –

enter image description here

I want to add page flip animation when turning pages, and I have explored some libraries like StPageFlip, turnjs, but all of them require content to be explicitly defined in page like, and if the content doesn’t find the page it’s truncated –

<div id="magazine">
    <div><span class="text">Page 1</span></div>
    <div><span class="text">Page 2</span></div>
    <div><span class="text">Page 3</span></div>
</div>

To use them, I’ll have to divide the content into smaller divs, make sure the div’s content fit the screen size, etc which feels like lot of overhead processing. And how to divide the content such that it always fits the screen?

Is there any library which converts existing html content into book style without having to explicitly define the pages?
Or how can I implement a basic version of page flip animation myself, how should I approach it? Any pointers would be helpful.

Can I somehow add some animation to the current scroll code I have to make it somewhat look like page flip?

$(div).animate({
    scrollLeft: scrollLeftValue
},
{
    duration: 300
});

Source: Ask Javascript Questions

LEAVE A COMMENT