CodeCanyon Page Flip 11772491

CodeCanyon Page Flip 11772491

CodeCanyon Page Flip 11772491
JavaScript \ Images and Media
Flip \ Effect \ Page \ Jquery

JavaScript - Page Flip 11772491 by phpwapp @ CodeCanyon

JavaScript \ Images and Media

Last Update: 23 June 15; High Resolution: Yes; Compatible Browsers: IE10, IE11, Firefox, Safari, Opera, Chrome; Files Included: JavaScript JS, HTML, CSS; Software Version: jQuery.

Page Flip is jQuery/App Framework plugin to give Flipboard app like effect. Flip effect uses css 3D transform.

This plugin is made to be very easy to use. With only a few lines of code you can have a flipping animation between your views, this looks and acts very much like the Flipboard application.

The following structure will allow to add custom content in a wrapper

<div id="flip-page">
<div>
<!-- custom content -->
</div>
<div>
<!-- .. -->
</div>
<div>
<!-- .. -->
</div>
<div>
<!-- .. -->
</div>
<!-- .. -->
</div>

The plugin can be called like this.

var flip = new Flip();
flip.setup({
elements: $('#flip-page > div'),
pageIndex: 1,
//callback before the flip transition
onStart: function (pageIndex) {
},
//callback after the flip transition
onFinish: function (pageIndex) {
},
onClick: function (e) {
console.log("x: " + e.x + " - y: " + e.y);
}
});

Options

speed: 400, //speed for the flip transition in ms, default 400ms
nextEl: '', //if we want to specify a selector that triggers the next() function.
prevEl: '', //if we want to specify a selector that triggers the prev() function.
pageIndex: 3, //set active page, default 1

The following public methods are available to use

flip.next();
flip.prev();
flip.currentPage();

Keywords: jquery flip, page flip effect.



Tags: Effect, Jquery

Premium CodeCanyon Page Flip 11772491 WordPress Themes, Website Templates, Mobile Themes, Flash Templates & Scripts from creative professional designers. Full details of CodeCanyon Page Flip 11772491 for digital design and education. CodeCanyon Page Flip 11772491 desigen style information or anything related.

Comments:

Name:*
E-Mail:*
Add Comments:
Enter Code: *