Page Peel Effect Using MooTools

CSS

#page-flip { position: relative; right: 0; top: 0; float: right; }
#page-flip-image { width: 50px; height: 52px; z-index: 99; position: absolute; right: 0; top: 0; -ms-interpolation-mode: bicubic; }
#page-flip-message { width: 50px; height: 50px; overflow: hidden; position: absolute; right: 0; top: 0; background: url(subscribe.png) no-repeat right top; }

HTML

<div id="page-flip">
<a href="http://feeds.feedburner.com/iGPSTechBlog"><img src="page_flip.png" alt="Subscribe!" id="page-flip-image" border="0" /></a>
<div id="page-flip-message"></div>
</div>

MooTools JavaScript

(function($,$$) { window.addEvent('domready',function() {
   
   var flip = $('page-flip');
   var flipImage = $('page-flip-image');
   var flipMessage = $('page-flip-message');
   
   flip.addEvents({
    mouseenter:function() {
     $$(flipImage,flipMessage).set('morph',{ duration: 500 }).morph({
      width: 307,
      height: 319
     });
    },
    mouseleave:function() {
     flipImage.set('morph',{ duration: 220 }).morph({
      width: 50,
      height: 52
     });
     flipMessage.set('morph',{ duration:200 }).morph({
      width: 50,
      height:50
     });
    } 
   });
  }); })(document.id,$$);

MooTools 1.2.3

Click Here to DOWNLOAD

Example

Click to DEMO