flipout_cards: A CSS repository from peachananr

#Flip Out Cards by Pete R. Create a Dynamic Multi Level Flip Out Cards Created by Pete R., Founder of Travelistly and BucketListly

Demo

View demo

Compatibility

Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. I have not tested this on IE.

Basic Usage

To create a flip out cards that shows more info when hover, simply include the latest jQuery library together with jquery.flipout_cards.js and flipout_cards.css into your document's <head>, and call the function as follows:

  $(".flipout").flipout_cards({
    animation: "flipOut",           // Animations available are: flipOut, slideOut and foldOut. The default value is flipOut
    beforeOpen: function () {},     // This option accepts a callback function. The function will be called before the flip open animation starts.
    afterOpen: function () {},      // This option accepts a callback function. The function will be called after the flip open animation finishes.
    beforeClose: function () {},    // This option accepts a callback function. The function will be called before the flip close animation starts.
    afterClose: function () {}      // This option accepts a callback function. The function will be called after the flip close animation finishes.
  });

Now all you have to do is follow this HTML markup as shown below:

<div class="flipout">
  <div class="foc-main">
    ...
  </div>
  <div class="foc-left">
   ...
  </div>
  ...
</div>

The container with the class name foc-main will be the main content area where the cards will flip out from. All the other containers below that will be the cards itself. You can have as many cards as you like. Simply duplicate the container with the class name foc-left and the plugin will automatically stack it all up in order.

You can also define which direction the cards will appear by simply changing the class name of the cards' container. Available class names are foc-left, foc-right, foc-top, and foc-bottom.

Callbacks

You can use callbacks to perform actions before or after the card displays:

beforeOpen

This option accepts a callback function. The function will be called before the flip open animation starts.

$(".flipout").flipout_cards({
  beforeOpen: function () {
    ...
  }
});

afterOpen

This option accepts a callback function. The function will be called before the flip open animation finishes.

$(".flipout").flipout_cards({
  afterOpen: function () {
    ...
  }
});

beforeClose

This option accepts a callback function. The function will be called before the flip close animation starts.

$(".flipout").flipout_cards({
  beforeClose: function () {
    ...
  }
});

afterClose

This option accepts a callback function. The function will be called before the flip close animation finishes.

$(".flipout").flipout_cards({
  afterClose: function () {
    ...
  }
});

And that's all for the flip out cards plugin. I hope you will find this useful. Stay tuned for more updates.

If you want to see more of my plugins, visit The Pete Design, or follow me on Twitter and Github.

Other Resources

Tutorial (Coming Soon)

peachananr/flipout_cards