Option: autoCenter: Difference between revisions

From Turn.js Documentation
Jump to navigation Jump to search
No edit summary
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 3: Line 3:
{| class="wikitable"
{| class="wikitable"
|-
|-
! scope="row" align="right" | Type
! scope="row" | Type  
| Boolean
! scope="row" | Default value
|-
|-
! scope="row" align="right" | Default value
| Boolean
| false
| false
|}
|}


<yambe:breadcrumb>Options</yambe:breadcrumb>
==Adding animation==
It's just as simple as adding a transition to the <tt>margin-left</tt> property.
<pre class="css">
#flipbook{
  -webkit-transition:margin-left 0.2s ease-in-out;
  -moz-transition:margin-left 0.2s ease-in-out;
  -o-transition:margin-left 0.2s ease-in-out;
  -ms-transition:margin-left 0.2s ease-in-out;
  transition:margin-left 0.2s ease-in-out;
}
</pre>
 
<yambe:breadcrumb>Turn Options</yambe:breadcrumb>

Latest revision as of 06:25, 26 November 2012

Centers the flipbook depending on how many pages are visible. The autoCenter option changes the CSS margin-left property of the flipbook.

Type Default value
Boolean false

Adding animation

It's just as simple as adding a transition to the margin-left property.

#flipbook{
  -webkit-transition:margin-left 0.2s ease-in-out;
  -moz-transition:margin-left 0.2s ease-in-out;
  -o-transition:margin-left 0.2s ease-in-out;
  -ms-transition:margin-left 0.2s ease-in-out;
  transition:margin-left 0.2s ease-in-out;
}

<yambe:breadcrumb>Turn Options</yambe:breadcrumb>