Card Flip Animation with Jquery – Flipper.js

Category: Animation | September 4, 2018
card flip animation jquery
Author: cameronroe
Official Page: Go to Website
Last Update:March 28, 2019
License:MIT

The flipper.js give a way to create card flip animation. The plugin builds with Jquery and CSS3 animation. It has the option to make the flipping card work on click or on hover. It also provides different rotation Type and you can set whether it rotate left, right, up and down.

It comes with the option to handle the depth and speed by setting the parameter. The plugin work with images and text. It works with DIV element and when the user hovers or click the element, they can see the content of the back side of a DIV.

It allows adding the text, photo or video on both sides of the element. It is the best way to present the content boxes to your site visitor. It helps you to save the space of the webpage.

Hot to Create Flipping Card Animation

You need to add the following of three files in the head.

<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="dist/jquery.flipper.min.js"></script>

The next we need to define the HTML. We have defined the section HTML5 element but you can also use the DIV, it doesn’t matter. Only to make sure to add the section ID and in our case, we have defined Flipper.

Then we will have two child divs, one for front view and the second one on the back side.

<section id="Flipper">
<!-- There should be two elements inside the flipper -->
<section class="front"></section>
<section class="back"></section>
</section>

Finally, initial the function by adding the ID.

<script>
$('#Flipper').flipper({
  rotationType: 'left-slide',
  depth: 1000,
  speed: 0.2
});
</script>

How to Make CSS Flip Card On Hover

If you want to make the flipping box work on hover, you simply need to add the event and set its value to click. Let’s have a look at the function.

<script>
$('#Flipper').flipper({
  rotationType: 'right-slide',
  event: 'click',
  depth: 2000,
  speed: 0.1
});
</script>

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.