New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/rocket-page-flip/
Rocket Page Flip
Download Demo
Rocket Page Flip is jQuery plugin for page turning effect. Page flip slider for modern browser. Old browsers will just show/hide pages. Flip is done via CSS 3D tranformations with shadow on pages while flipping.
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="css/pageflip.css"> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="js/pageflip.js"></script>
2. HTML
<div class="pageflip"> <div class="page page-current" style="background: #209657 url('img/1.jpg') no-repeat center center"> </div> <div class="page" style="background: #0387A5 url('img/2.jpg') no-repeat center center"> </div> <div class="page" style="background: #A5C8CB url('img/3.jpg') no-repeat center center"> </div> <div class="page" style="background: #0B0B0B url('img/4.jpg') no-repeat center center"> </div> <div class="page" style="background: #82BDC4 url('img/5.jpg') no-repeat center center"> </div> </div>
3. JAVASCRIPT
var pageflip = new RocketPageFlip('.pageflip', current: 0 );
4. OPTIONS
defaultOptions = current: 0, // page to display navigation: true, // show pagination directionalNav: true, // show navigation btns prevText: 'prev', // text for prev button nextText: 'next' // text for next button ;