Create a Flip Effect with jQuery to Show Images and Text

jquery flip animation effect
In this tutorial, we are going to discuss flip effect with jquery flip plugin. Basically, it is very easy and simple to implement flip effect by using jquery flip plugin.

To create flip animation with HTML, you need to create two containers inside one parent div element with a CSS classname “.flip”(you can use your own class name), inside this parent element we will have both front and back contents. So in the front div element, you can design whatever you want that would display on the front side of the flip and in the back div element we will have back content for back flip.

The HTML:


	<div class="flip"> 
		<div class="front"> 
			<img src="images/flip-image.jpg" alt="" />
		</div> 
		<div class="back">
			<h3>Some Text in the Back!</h3>
		</div> 
	</div>

	<div class="clear">&nbsp;</div>

	<div id="card-fluid" class="card"> 
		<div class="front" > 
		  <img src="images/flip-image2.jpg">
		</div> 
		<div class="back">
			<p>
				Scenery is perhaps the hardest thing to make interesting on the page. Your characters need to travel, see the world be it as simple as a room in their house or an exotic place across the globe or maybe another dimension entirely.
			</p>
			<ul>
				<li> Point 1 </li>
				<li> Point 2 </li>
				<li> Point 3 </li>
			</ul>
	</div> 
</div>

In the code above we defined these elements:

  • flip and card container class. The classes that we will call later in jquery to bind flip events.
  • front container class. The image to display by default.
  • back container class. The content to display when the flip happens.

The CSS:
Add the following CSS code to style.css, in order to create up the end result:


.card {
    width: 500px;
    height: 300px;
}

.flip {
    height: 300px;
    width: 500px;
	text-align: center;
}
.front,.front img {
    width: 500px;
    height: 300px;
	float:left;
}
.back {
    background: #2184cd;
    color: #fff;
	padding:10px;
}

Set custom width and height properties depending to your image size or content.

The Javascript:
At the end of body close tag, load the code below in exactly the order below.


<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>

<script type="text/javascript">
$(function(){
    $(".flip").flip({
        trigger: 'click'
    });
	
	$(".card").flip();
});
</script>

Visit jQuery flip effect. To make the flip effect with a click, instead of a hover event, set the trigger values to ‘click’ or leave it as empty like second syntax. Check the below links for demo an download.

Download / Demo

You may also like...