Cross-browser JavaScript Page Flip Library – flip.js

Category: Animation , Javascript , Recommended | April 7, 2015
Author: terrilldent
Views Total: 4,202
Official Page: Go to website
Last Update: April 7, 2015
License: MIT

Preview:

Cross-browser  JavaScript Page Flip Library – flip.js

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)

You Might Be Interested In:

One thought on “Cross-browser JavaScript Page Flip Library – flip.js

  1. Kon-tiki

    Hi! Congratulations on the article! It’s not work on Chrome (Mac). “Demo” too.
    Can do you help me?

    Reply

Leave a Reply