In this tutorial, a jQuery plug-in is used for creating 3D flip animations.
- 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 on the specified element, the back content will display with the flip animation.
- As you take the mouse away or click again, the “front” content will display again with an animation.
See the 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 a flip, and “back” content will display.
You may adjust the speed of the flip animation by using the speed option in the jQuery code section.
Have a look at the demo and code which is followed by how to set up this plug-in for your web pages:
Full code for this example:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/flip/flip.js"></script>
<style type="text/css">
.card {
width: 500px;
height: 200px;
margin: 20px;
}
.front, .back, .other-front, .other-back {
border: 2px gray solid;
padding: 10px;
}
.front, .other-front {
background-color: #408080;
color: #fff;
}
.back, .other-back {
background-color: #C6E3E3;
}
</style>
</head>
<body>
<div id="card-flip-animation" class="card">
<div class="other-front">
Front: The front content will display first. Palce front content here. The front content will display first. Palce front content here. The front content will display first. Palce front content here. The front content will display first. Palce front content here.
</div>
<div class="other-back">
<a href="https://google.com">link</a>
Back: The back content will display as you bring mouse over this div element. The back content will display as you bring mouse over this div element. The back content will display as you bring mouse over this div element.
</div>
</div>
<script type="text/javascript">
$(function(){
$("#card-flip-animation").flip({
axis: "y", // y or x
reverse: false, // true and false
trigger: "hover", // click or hover
speed: '1000',
front: $('.other-front'),
back: $('.other-back'),
autoSize: false
});
});
</script>
</body>
</html>
Here is the code break up:
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 cards 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:
<style type="text/css">
.card {
width: 500px;
height: 200px;
margin: 20px;
}
.front, .back, .other-front, .other-back {
border: 2px gray solid;
padding: 10px;
}
.front, .other-front {
background-color: #408080;
color: #fff;
}
.back, .other-back {
background-color: #C6E3E3;
}
</style>
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 the back div.
The front div’s content will display as the web page loads while the back div’s content will display as the mouse hovers over the card area.
<div id="card-flip-animation" class="card"> <div class="other-front"> Front: The front content will display first. Palce front content here. The front content will display first. Palce front content here. The front content will display first. Palce front content here. The front content will display first. Palce front content here. </div> <div class="other-back"> <a href="http://google.com">link</a> Back: The back content will display as you bring mouse over this div element. The back content will display as you bring mouse over this div element. The back content will display as you bring mouse over this div element. </div> </div>
Finally, the jQuery code that deals with the flip animation. There, you may specify a few options for the plug-in like axis (x or y), speed, trigger at hover or click, front and back, etc.
<script type="text/javascript">
$(function(){
$("#card-flip-animation").flip({
axis: "y", // y or x
reverse: false, // true and false
trigger: "hover", // click or hover
speed: '1000',
front: $('.other-front'),
back: $('.other-back'),
autoSize: false
});
});
</script>
A demo of flip animation on click
In this example, the animation occurs as you click the card’s area rather than mouse hover.
The only difference between this and the above example is the trigger option where I used click value in that case rather hover value.
The markup is the same while this script is used in the example:
<script type="text/javascript">
$(function(){
$("#card-flip-animation").flip({
axis: "y", // y or x
reverse: true, // true and false
trigger: "click", // click or hover
speed: '1500',
front: $('.other-front'),
back: $('.other-back'),
autoSize: false
});
});
</script>
A demo of using images as the flip animation
In this example, rather than using the text content, I 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 at 2000 i.e. 2 seconds. For demonstration, the axis value is used “x” unlike “y” used in the first two examples:
The following markup is used:
<div id="card-flip-animation" class="card"> <div class="other-front"> <img src="images/banana-small.jpg"> </div> <div class="other-back"> <img src="images/banana.jpg"> </div> </div>
The script:
<script type="text/javascript">
$(function(){
$("#card-flip-animation").flip({
axis: "x", // y or x
reverse: true, // true and false
trigger: "hover", // click or hover
speed: '2000',
front: $('.other-front'),
back: $('.other-back'),
autoSize: false
});
});
</script>
That’s it!