A jQuery plugin to flip content with 3D animation
Simply include jquery.flip.js on your page. jQuery Flip has a dependency on jQuery so make sure to include that first.
Use both jQuery and jQuery Flip directly from CDN. No need to download anything:
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js">
<script src="jquery-2.1.4.min.js">
<script src="jquery.flip.js">
bower install flip
In your HTML file, create a <div> with two <div>s inside with class .front and .back:
<div id="card">
<div class="front">
Front content
</div>
<div class="back">
Back content
</div>
</div>
Then, call jQuery flip() on it:
$("#card").flip();
You can specify other selectors instead of .front and .back by setting
the options front and back
when instantiating flip.
If your setup is simple enough, you can even forgo the selectors entirely without any extra effort:
<div id="card">
<div>
Front content
</div>
<div>
Back content
</div>
</div>
margin should be added to .card and padding should be added to .front and .back
| Attribute | Possible value | Description |
|---|---|---|
| [Options] | Object(see below),true, false, 'toggle' |
If an object, the settings to apply to the flip element. Otherwise, a value representing how the object should be immediately flipped. |
| [callback] | function | A function to be called upon the completion of this call to flip. |
| Attribute | Possible value | Default | Availability | Description |
|---|---|---|---|---|
| axis | 'y', 'x' |
'y' |
Always | The axis that you want to rotate around |
| trigger | 'click', 'hover', 'manual' |
'click' |
Init only | Event that activates the flip action. Using manual means that
you have to activate it via javascript. When this is set to click
and the tap event is available (through e.g.
jQuery Mobile or
jQuery Touch Events),
flip will bind to that instead of to click as a regular click will also
instantaneously trigger a tap event, but not vice-versa. This gets rid
of the 300ms
click delay on mobile browsers. |
| reverse | true, false |
false |
Always | Set to true if you want to reverse the direction of the flip. |
| speed | any integer | 500 |
Init only | Duration of the flipping animation in miliseconds. Higher means slower. |
| front | [selector], jQuery object |
'.front' |
Init only | The selector that flip will use to find the front face of the flippable content. |
| back | [selector], jQuery object |
'.back' |
Init only | The selector that flip will use to find the back face of the flippable content. |
| autoSize | true, false |
true |
Init only | Whether the front and back panels should be automatically sized to fit the container. Will make flip add styles width:100% and height:100% to them. Works well in fluid containers. |
| forceWidth | true, false |
false |
Init only | Whether the front and back panels should be forced to the width of the container. Will make flip add style width:xxpx to them (where xx is the container's outerWidth). Does not work well with fluid containers. NOTE: This option is provided for backward compatibility and should eventually be deprecated. If you are migrating from an older version of Flip and are having issues with the new dynamic sizing feature, you can set forceWidth and forceHeight to true, and autoSize to false to make Flip behave the same as it did before. If you find you need this option, please report it to us as it should not be needed. |
| forceHeight | true, false |
false |
Init only | Whether the front and back panels should be forced to the height of the container. Will make flip add style height:yypx to them (where yy is the container's outerHeight). Does not work well with fluid containers. NOTE: This option is provided for backward compatibility and should eventually be deprecated. If you are migrating from an older version of Flip and are having issues with the new dynamic sizing feature, you can set forceWidth and forceHeight to true, and autoSize to false to make Flip behave the same as it did before. If you find you need this option, please report it to us as it should not be needed. |
| Event | Description |
|---|---|
| flip:done | Triggered on the completion of a flip. |
| flip:change | Triggered once flip is done updating the settings of an element. |
All jQuery events added by the plugin contain .flip namespace. You can unregister flip by:
$("#card").off(".flip");
You can get API object to change interaction or see states by:
var flip = $("#card").data("flip-model");
// e.g. to see currect flip state
flip.isFlipped;
You can flip to the back by calling
$("#card").flip(true);
And flip it back to the front by calling
$("#card").flip(false);
Toggle front and back by calling
$("#card").flip('toggle');
Change the axis orientation on the fly:
$("#card").flip({axis: 'x'});
Similarly for reverse:
$("#card").flip({reverse: true});
$("#card").flip({
axis: 'x',
trigger: 'hover'
});
$("#card").flip({
axis: 'x',
trigger: 'hover',
reverse: true
});
$("#card").flip({
trigger: 'manual'
});
$("#card").flip(true);
$("#card").flip(false);
$("#card").flip('toggle');
$("#card").flip({
axis: 'y',
trigger: 'click'
});
$("#card").flip({axis: 'x'});
$("#card").flip({axis: 'y'});
$("#card").flip({reverse: true});
$("#card").flip({reverse: false});
$("#card").flip({
trigger: 'click'
});
$("#card").on('flip:done',function(){
$(this).doCoolFadingThings();
//Disclaimer: ^This function is fake :)
});
$("#card").flip({
trigger: 'click'
});
$("#card").flip({axis: ...});
//We're just toggling between y and x
$("#card").on('flip:change',function(){
$('#card').flip('toggle');
});
Try to resize your browser window. The card in this example will resize with it.
$("#card").flip();