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
<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>
This code is very help full for my team so we are really thank full to Tutorialized.com
U***itedweb.in Team