Cross-browser JavaScript Page Flip Library – flip.js

Preview:

Description:

flip.js is a cross-browser and mobile-first JavaScript page flip library that provides a creative way to show book flipping (page folding) effects in the flat style.

How to use it:

Add the flip-v1.0.0.css into the head section of the document.

<link rel="stylesheet" href="flip-v1.0.0.css">

Markup html structure.

<div id="demo" class="flip-book">
  <div>
    <div style="background-image:url('images/1.jpg')" >
      <div class="cover-text">
        <h1>Heading</h1>
        <h2>Sub heading</h2>
      </div>
    </div>
    <div style="background-image:url('images/2.jpg')">
    </div>
    <div style="background-image:url('images/3.jpg')">
    </div>
    <div style="background-image:url('images/4.jpg')">
    </div>
  </div>
</div>

Load the flip-v1.0.0.js at the end of the document.

<script src="flip-v1.0.0.js"></script>

Initialization.

var sampleBookInit = function(){
  flip.basic( 'demo' );
};
window.addEventListener( 'DOMContentLoaded', sampleBookInit, true );

Advanced usages.

// Creates a flip book using the contents of the provided element. 
// Expects provided element to have a single child element that contains all the pages. 
// This is wrapper, and the easiest way to build a book. No need to look at the rest of the API if this works for you.
flip.basic(bookElement)
// Creates a flip book using the contents of the provided element. 
// Expects provided element to have a single child element that contains all the pages. 
// firstPage is an object created by flip.page.create().
flip.init(bookElement, firstPage)
// Creates a flip book using the contents of the provided element. 
// Expects provided element to have a single child element that contains all the pages.
flip.prime(nextPage)
// Returns the height of the page stack
flip.getStackHeight()
// Push a new page immediately onto the book, and transition it into view.
flip.push(page)
// Go back one page and pop the current page off the stack.
flip.pop()
// Close the book and return to the first page, removing all other pages from stack.
flip.close()
// Creates a page for the book with the provided content element. 
// The optional page event listener parameter expects an object with functions named the following (all optional):
/*
{
  onObscure:      function(){},
  onStay:         function(){},
  onShowComplete: function(index){}
}
*/
flip.page.create(pageContentElement, listener)