Create a Dynamic Flip Out Card with FlipOut_Cards.js

by in Tutorials on 12th Feb 2014 · 0 Comment

The overload of information has always been problematic for web designers and developers. Today, I have decided to tackle this issue and create a plugin that lets you hide secondary information and shows it when the viewers interact with elements on the website, but as with all my plugins, you can expect your information to be shown in style.

Flip Out Cards is a plugin that will let you display more information by flipping out extra cards without consuming much space. Without further ado, let’s explore all the possibilities that this plugin can offer.

Note: This plugin has been tested on Chrome, Firefox, Safari, both on desktop and mobile. This has not been tested on IE.

Create a Dynamic Flip Out Card with FlipOut_Cards.js


How to Use FlipOutCards.js

How does this work?

The plugin will gather all the cards, group them together based on the direction defined (left, right, bottom, and top), position them correctly and hide them out of view. Since all animations are driven by CSS3, all I had to do was add the right class name to each card in sequence in order to activate the flip animation.

In order to execute this animation in sequence with precision, I had to use timestamps and multiply them by the number of cards in each direction group. For example, if there are 5 “foc-left” containers, the plugin will loop through these and execute the animation one by one. Since the calculation is based on the multiplication of the number of cards detected, you can add as many levels of cards as you like and the plugin will adapt, stack them all and animate them in sequence.

Now, you will have a dynamic, multi-level flip out card without having to do the calculation yourself.

How-Tos

Since this is a jQuery plugin, please make sure you include the latest jQuery library available here, jQuery.flipout_cards.js and flipout_cards.css which can be found here, in to your document’s <head>.

Once that is done, follow the HTML markup shown below:

HTML

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

The container with the class name “foc-main” will be the main container where the cards will flip out from. Anything below that will be used as a card and will be hidden initially, so feel free to add as many cards containers as you like.

To define the direction where the cards will flip out from, simply switch out the “foc-left” class name to either “foc-right”, “foc-top” or “foc-bottom”.

Now call the function as follows:

JS

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

The script will detect all the cards, group and stack them up nicely without you having to do it by yourself. Now, let’s explore all the options available:

  • animation: You can set what kind of animation you would like your users to see here. Available options are “flipOut”, “slideOut” and “foldOut”. The default value is “flipOut”
  • beforeOpen: With this option, you can run any javascript function before the open card’s animation starts. This is perfect for when you want to manipulate the data or initialize other animations before the card opens. The option accepts function.The default value is “null”.
  • afterOpen: This option lets you run any javascript function after the open card’s animation finishes. The option accepts function. The default value is “null”.
  • beforeClose: You can also run any other javascript function before the close card’s animation starts. This option accepts function. The default value is “null”.
  • afterClose: and you can do the same after the close card’s animation finishes. This option accepts function. The default value is “null”.

Callback Examples

Here are some examples on how you can use all these callbacks with the Flip Out Cards plugin.

  • beforeOpen(): The function will be called before the flip open animation starts.

    JS

    $(".flipout").flipout_cards({
      beforeOpen: function () {
        alert(“About to be opened”)
      }
    });
    
  • afterOpen(): The function will be called before the flip open animation finishes.

    JS

    $(".flipout").flipout_cards({
      afterOpen: function () {
        alert(“Opened Successfully”)
      }
    });
    
  • beforeClose(): The function will be called before the flip close animation starts.

    JS

    $(".flipout").flipout_cards({
      beforeClose: function () {
        alert(“About to be closed”)
      }
    });
    
  • afterClose(): The function will be called after the flip close animation finishes.

    JS

    $(".flipout").flipout_cards({
      afterClose: function () {
        alert(“Closed successfully”)
      }
    });
    

Conclusion

Now your website will have an infinite multi-level flip card that will let you hide as much unnecessary information as you like without consuming much space. I hope you like today’s tutorial and I can’t wait to see what you guys will come up with using this plugin. Again, if you have anything to share, or have a question, please don’t hesitate and let me know in the comments below.

Pete is a Bangkok entrepreneur, a UI designer, and a Ruby on Rails developer. He is the founder of Bucketlistly.com and MyColorscreen.com. Other than his businesses, design and development, he also loves astronomy, indie music, and blogging.