Author: | terrilldent |
---|---|
Views Total: | 5,504 views |
Official Page: | Go to website |
Last Update: | April 7, 2015 |
License: | MIT |
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)
Hi! Congratulations on the article! It’s not work on Chrome (Mac). “Demo” too.
Can do you help me?