Hit enter after type your search item

3D flip animations by using jQuery: 3 demos

3D flip animations and jQuery

In this tutorial, a jQuery plug-in is used for creating 3D flip animations. The plug-in name is “flip” that can be downloaded from this link.

You may specify the back and front content differently for the “card” used for animation. The animation may occur as you bring the mouse over the specified element like div or at the click event as well. As the mouse is brought over or clicked in the specified element, the back content will display with the flip animation. As you take mouse away or click again, the “front” content will display again with an animation.

See the live demos below for using this plug-in along with how to set up this plug-in.

A demo of jQuery animation (3D flip)

In this example, as you bring the mouse over the card area, the div will animate with flip and “back” content will display. You may adjust the speed of flip animation by using the speed option in the jQuery code section. Have a look at the live demo and code which is followed by how to set up this plug-in for your web pages:

jQuery flip animation

See online demo and code

For setting up this cool plug-in in your web pages, simply include the jQuery library along with the plug-in’s flip.js file in the <head> section.

<script src=”http://code.jquery.com/jquery-1.11.3.min.js”></script>

<script src=”js/flip/flip.js”></script>

You may define the style of card’s or area where the flip animation will occur in the <style> section or your external CSS file. In the demo, it is defined in the <head> section’s <style> area:

 


 

In the markup section, use the card class in the <div> tag and inside that <div> first use the front div content which is followed by back div. The front div’s content will display as web page loads while the back div’s content will display as the mouse hovers over the card area.

 


 

Finally, the jQuery code that deals with the flip animation. There, you may specify a few options of the plug-in like axis (x or y), speed, trigger at hover or click, front and back etc.

 


 

Get the complete code in the demo page’s left panel.

A demo of flip animation on click

In this example, the animation occurs as you click the card’s area rather mouse hover.  The only difference between this and above example is the trigger option where I used click value in that case rather hover value.

jQuery flip animation click

See online demo and code

The markup is the same while this script is used in the example:


 

A demo of using images as the flip animation

In this example, rather than using the text content, I have used two images. One image, which is smaller, is for the front part and as you hover the mouse over it, the larger image will display with flip animation. The speed of the animation is kept 2000 i.e. 2 seconds. For demonstration, the axis value is used “x” unlike “y” used in first two examples:

jQuery flip animation images

See online demo and code

The following markup is used:


 

The script:


 

 

That’s it!

This div height required for enabling the sticky sidebar