The page flip effect for HTML5
Switch branches/tags
Nothing to show
Clone or download
2
Latest commit 08c1f65 May 4, 2013
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demos Update of license May 10, 2012
changelog.txt r3 Apr 2, 2012
license.txt Update of license May 10, 2012
readme.md Update readme.md May 4, 2013
turn.js I tried it in chrome 19.0.1055.1 dev-m with `--enable-touch-events` i… Jun 4, 2012
turn.min.js Update of license May 10, 2012

readme.md

Bilby Stampede

Get the turn.js 4th release on turnjs.com

What's new in turn.js 4th release?

  • Added option autoCenter

  • Added option zoom

  • Added property animating

  • Added property zoom

  • Added method center

  • Added method destroy

  • Added method is

  • Added method zoom

  • Added event missing

  • Added event zooming

  • Added class .even

  • Added class .fixed

  • Added class .hard

  • Added class .odd

  • Added class .own-size

  • Added class .sheet

  • Added the ignore attribute

  • New turn.html4.js

  • New scissors.js

  • Changed the class .turn-page to .page

  • Improved the animation frame generator with requestAnimationFrame

  • Improved the animation speed for hard pages with CSS3 transitions

  • Redesigned the event sequence to listen to only three events

  • Fixed issue #79

  • Fixed issue #91

  • Fixed issue about the event order turning + turned

  • Fixed issue about appending pages in wrong locations

Available only on turnjs.com


turn.js 3rd release

Make a flip book with HTML5

Turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine. It works in all modern browsers including touch devices.

What's new?

  • New addPage for creating pages dynamically.

  • New display for single and double pages.

  • Gradients for non-webkit browsers.

Usage

CSS code:

#magazine{
	width: 800px;
	height: 400px;
}
#magazine .turn-page{
	background-color:#ccc;
}

HTML code:

<div id="magazine">
	<div><span class="text">Page 1</span></div>
	<div><span class="text">Page 2</span></div>
	<div><span class="text">Page 3</span></div>
</div>

JavaScript code:

$('#magazine').turn({gradients: true, acceleration: true});

Requirements

jQuery 1.7 or later

Browser support

  • Chrome 12, Safari 5, Firefox 10, IE 9

License

Released under a non-commercial BSD license

Full documentation


turnjs.com