Scissor: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
(5 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
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 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. | 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 initially looked like. | ||
== Example == | == Example == | ||
1. HTML | |||
<pre class="xml"> | <pre class="xml"> | ||
<div id="flipbook"> | <div id="flipbook"> | ||
Line 16: | Line 16: | ||
</pre> | </pre> | ||
2. JavaScript | |||
<pre class="javascript"> | <pre class="javascript"> | ||
// | // Using scissor | ||
$("#flipbook .double").scissor(); | $("#flipbook .double").scissor(); | ||
// | // Creating the flipbook | ||
$("#flipbook").turn({width: | $("#flipbook").turn({width:800, height:400}); | ||
</pre> | </pre> |
Latest revision as of 21:03, 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 initially 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>
2. JavaScript
// Using scissor $("#flipbook .double").scissor(); // Creating the flipbook $("#flipbook").turn({width:800, height:400});