Ads

Thursday, 4 September 2014

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
;



Rocket Page Flip

No comments:

Post a Comment