Scissor: Difference between revisions

From Turn.js Documentation
Jump to navigation Jump to search
No edit summary
No edit summary
Line 2: Line 2:


Scissor takes a DOM element and replace it by two elements in which there are a copy of the initial element after being positioned according to what it looked like.
Scissor takes a DOM element and replace it by two elements in which there are a copy of the initial element after being positioned according to what it looked like.
== Example ==
# HTML
<pre class="xml">
<div id="flipbook">
<div class="p1">Page 1</div>
<div class="double"> Page 2 and 3</div>
<div class="double"> Page 3 and 4</div>
<div class="double"> Page 5 and 6</div>
<div class="p7">Page 7</div>
<div>
</pre>
# JavaScript
<pre class="xml">
// Separate double pages
$("#flipbook .double").scissor();
// Create the flipbook
$("#flipbook").turn({width: 1000, height:800});
</pre>

Revision as of 20:57, 8 July 2012

Scissor is a jQuery plugin that cuts a page in two parts, so that you can have double pages made entirely in HTML5 or images and split them into two pages.

Scissor takes a DOM element and replace it by two elements in which there are a copy of the initial element after being positioned according to what it looked like.

Example

  1. HTML
<div id="flipbook">
	<div class="p1">Page 1</div>
	<div class="double"> Page 2 and 3</div>
	<div class="double"> Page 3 and 4</div>
	<div class="double"> Page 5 and 6</div>
	<div class="p7">Page 7</div>
<div>
  1. JavaScript
// Separate double pages
$("#flipbook .double").scissor();
// Create the flipbook
$("#flipbook").turn({width: 1000, height:800});