This tutorial is all about creating a dynamic multi level flip out cards. Flip Out Cards is a plugin created by Pete R.  Since overload of information has always been issue for web developers and designers. Here you will learn how to overcome this by hiding secondary information and display it when the viewers interact with elements on the website. It’s a stylish card that flips out extra information without consuming too much space.

Create a Dynamic Multi Level Flip Out Cards

 

Demo Download

How does this works

This plugin built to collect all the cards and group them together which is based on the defined direction (left, right, bottom, and top), and hide them out of view. All effects and animations handled through CSS3, you just need to add the right class name to each card in sequence in order to start the flip animation.

Create Basic Flip Out animation:

As this is jQuery plugin, you need to include the letest jQuery libraray and jQuery.flipout_cards.js and flipout_cards.css from plguin repository.

Once above is done, 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.

After HTML markup above call the function as follows:


$(".flipout").flipout_cards({
animation: "flipOut",
beforeOpen: function () {},
afterOpen: function () {},
beforeClose: function () {},
afterClose: function () {}
});

The above script will colect all the cards and group them nicely to show when the viewer interact with the specific element.

Callbacks

Now we will explore the callbacks to perform actions before or after the card displays:

  • animation: You can set animation you would like. Available options are flipOut, slideOut and foldOut. The default value is flipOut
  • 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 () {
    ...
    }
    });

By following above steps, you will have a multi-level flip card that will let you hide as much information as you like without consuming much space. I hope you like and enjoy this tutorial as well as plugin.

email