Create A Real E-Book With Turn.js

In today's tutorial we are going to see how we can create a "real" ebook by using the jQuery plugin turn.js. Using this jQuery plugin you can create a real looking turn of pages to create a magazine looking web page.

View the demo to see what you can create with Turn.js.

Demo

What Is Turn.js

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.

To use turn.js it's very easy all you have to do is use one method on the main book div. Below is the simplest form of using the turn.js plugin.

The HTML

<div id="book">
      <div> Page 1 </div>
      <div> Page 2 </div>
      <div> Page 3 </div>
</div>

The CSS

#book{
	width:80%;
	height:600px;
	margin:0 auto;
}
#book .turn-page{
	width:50%;
	height:600px;
	background-color:#fff;
}

The Javascript

$('#book').turn();

Using Turn.js Plugin

To use the Turn.js plugin you just assign the constructor to the out div of the book.

$('selector').turn([options]);

Turn.js Options

  • acceleration - Sets the hardware acceleration mode, default: true
  • display (r3) - Defines the initial display, default:double
  • duration - Sets the duration of the effect in microseconds, default: 600
  • gradients - Sets the gradient mode, default: true
  • height - Defines the height, default: $('selector').height()
  • inclination (r3) - Defines the inclination of the folded page when turning, default: 0
  • page - Defines the initial page, default: 1
  • pages - Sets the number of pages, default: $('selector').children().length
  • when (r3) - Defines the events (see the Event section for more), default: empty object
  • width - Defines the width, $('selector').width()

Download Turn.js

You can download turn.js for free by going to Github.

Download Github

Demo

Advertise here

Comment