Simple page flip effect using Jquery, css and simple html

Click to rate this tutorial!
[Total: 75 Average: 3.3]

Simple page flip effect using Jquery, css and simple html, very easy to implement just copy paste the code below
This is the javascript part enter it inside the … section of your website.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){

//Page Flip on hover
	$("#flipthepage").hover(function() {
		$("#flipthepage img , .msg_block").stop()
			.animate({
				width: '307px', 
				height: '319px'
			}, 500); 
		} , function() {
		$("#flipthepage img").stop() 
			.animate({
				width: '50px', 
				height: '52px'
			}, 220);
		$(".msg_block").stop() 
			.animate({
				width: '50px', 
				height: '50px'
			}, 200);
	});	
});
</script> 

Now add the required style

<style type="text/css">
img { behavior: url(iepngfix.htc) }
#flipthepage {
	position: relative;
	right: 0; top: 0;
	float: right; 
}
#flipthepage img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#flipthepage .msg_block {
	width: 50px; height: 50px;
	overflow: hidden;
	position: absolute;
	right: 0; top: 0;
	background: url(http://mistonline.in/wp/demo/subscribe.png) no-repeat right top;
}
</style>

Now last but not least our HTML part

<div id="flipthepage">
		<a href="http://mistonline.in/wp"><img src="http://mistonline.in/wp/demo/page_flip.png" alt="" /></a>
		<div class="msg_block"></div>
</div>

DEMO

Click to rate this tutorial!
[Total: 75 Average: 3.3]

One reply on “Simple page flip effect using Jquery, css and simple html”

This code is very help full for my team so we are really thank full to Tutorialized.com

U***itedweb.in Team

Leave a Reply

Your email address will not be published.