Main Page: Difference between revisions

From Turn.js Documentation
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
Turn.js is a library that will make your content look like a real book or magazine with just HTML content. It uses HTML5 and CSS3 to perform the effects, reason why it works nicely on touch devices such as all iOS (iPhone, iPad, iPod) and Androids.  
Turn.js is a library that will make your content look like a real book or magazine with just HTML content. It uses HTML5 and CSS3 to perform the effects, reason why it works nicely on touch devices such as all iOS (iPhone, iPad, iPod) and Androids.  


Let's take a look at how it works, turn.js takes all the advantages of having real HTML content over flash content, in a way that it's possible to add advertisements code, HTML5 videos, tooltips, slideshows, images, games (WebGL), full screen mode, and combine them with thousands of smart libraries and frameworks made for the web.  
Turn.js takes all the advantages of having real HTML content over flash content, in a way that it's possible to add advertisements code, HTML5 videos, tooltips, slideshows, images, games (WebGL), full screen mode, and combine them with thousands of smart libraries and frameworks made for the web.
 
The turn.js API was developed as a UI plugin for jQuery.


Let's take a look at how it works,


<pre class="javascript">
<pre class="javascript">

Revision as of 23:05, 8 July 2012

Turn.js is a library that will make your content look like a real book or magazine with just HTML content. It uses HTML5 and CSS3 to perform the effects, reason why it works nicely on touch devices such as all iOS (iPhone, iPad, iPod) and Androids.

Turn.js takes all the advantages of having real HTML content over flash content, in a way that it's possible to add advertisements code, HTML5 videos, tooltips, slideshows, images, games (WebGL), full screen mode, and combine them with thousands of smart libraries and frameworks made for the web.

Let's take a look at how it works,

$("#flipbook").turn();

Turn.js 4th release

This is the current release of turn.js, it has over 10 different performance improvements and more than 20 new features. The improvements were mainly focused on making the effects more fluent and smoother than any other page flip in the market as well as reducing memory consumption when using the browser' GPU and storing elements in the DOM tree. It also supports old browsers such as IE8 or IE7 by adding a new file called turn.html4.js, which has the exact same API (methods, properties) but it deals with the effects in a different way on HTML4 browsers.

Turn

Turn is the built-in jQuery plugin that comes with the turn.js development kit, which allows you to create flipbooks. These are the options, properties, events and CSS classes available in turn.js 4.0.6 release.

Options Properties Methods Events CSS Classes


Zoom Viewport

To implement the new zoom function, a new component is available since turn.js 4.0.2 to define the viewport of the pages when zoomed in. There's an article about how to add zoom to turn.js.

Options Properties Methods Events



Scissors

Scissors is literally a scissor that cuts a page in two parts, so that you can have double pages made entirely in HTML5 and split them into two pages.

Read more about Scissor