Page Peel Effect Using MooTools

By  on  
Peel Effect

Soh Tanaka release a great script back in May titled Simple Page Peel Effect with jQuery & CSS. The idea is that you place a "peel" image on the upper-right side of an element which, when hovered, "peels" open and peels close. I thought this was a quality, flexible idea so I've ported the jQuery code to MooTools.

The XHTML

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

A wrapper DIV containing an image and a "message" DIV.

The 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; }

These initial CSS is important as we'll be modifying this initial CSS with MooTools.

The 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,$$);

The peel effect is triggered by mouseenter and mouseleave events on the outter DIV element. You'd think there was more to it but the effect is driven simply by width and height animations.

What do you think about this effect? Would you use it? Too "flashy?" Share!

Recent Features

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

  • By
    Implement the Google AJAX Search API

    Let's be honest...WordPress' search functionality isn't great. Let's be more honest...no search functionality is better than Google's. Luckily for us, Google provides an awesome method by which we can use their search for our own site: the Google AJAX Search API.

  • By
    dwProgressBar v2:  Stepping and Events

    dwProgressBar was a huge hit when it debuted. For those of you who didn't catch my first post, dwProgressBar is a MooTools 1.2-based progress bar which allows for as much flexibility as possible. Every piece of dwProgressBar can be controlled by CSS...

Discussion

  1. Marcel

    That looks really static. I would prefer a “realistic” solution.

  2. Ahmad Azimi

    Hi,

    I have a question:
    Why are you using document.id instead of $? Is there any performance improvement?

  3. Interesting, I’ve never heard of “-ms-interpolation-mode” before…seems handy though…

  4. Darkimmortal

    -ms-interpolation-mode:bicubic;

    Cool, that should come in handy :>

  5. -ms-interpolation-mode:bicubic;

    It makes images look nicer that have been resized, but don’t apply it to all (or even more than a couple) img tags. There’s a reason it’s not on by default: it’s significantly slower to render.

  6. @Ahmad Azimi

    MooTools 1.2.3 DOM stuff doesn’t depend on the presence of $ anymore. The method that used to be $ is now called document.id (short for identify). The method $ is still assigned when not already present in the page, and aliased to document.id.

    Blog entry (MooTools.com)

  7. I’m not sure if I’d ever use that effect but it’s pretty cool. Nice to see how easy it is to do with MooTools.

  8. Try2Love

    Thanx Dude………… This is superb idea to utilize……….

  9. Alexander

    Thanks for this, you rock!

  10. Hi!,

    Thanks for this but as I have several code with 1.11 I need this code to work on 1.11.

    I know that the mouseenter & mouseleave was developed for 1.2 so, is there a way to change this into 1.11?

    I’m really newbiw with javascript so, I hope you can help me.

    Greetings

  11. The-F

    Yes, could you please port this in Mootools 1.1 too?

  12. nice technique, however you cant align PNG’s to the right as background images in IE6 and below…using a GIF in that situation would suffice.

  13. Russ

    Nice Job. This works perfectly. Thanks.

  14. Casey

    Great script! Any way to hide the page peel if the window is resized to be smaller? It covers up part of my menu. Thanks.

  15. Casey

    I played around for a bit and I got it to work if I add this code to the end of the script:

    			var imageresize = function() {
        		var winx = window.getSize().x;
        		flip.setStyle('display', ( (winx.toInt() < 1095) ? 'none' : 'block' )
       				);
    };
    
    window.addEvents(
    {
        'domready' : imageresize,
        'resize' : imageresize

    Any idea on how I could go about using morph again to shrink the #page-flip to 0 so it looks like it peels back in place instead of just disappearing?

  16. I would like to use something like this where the user would click and release or click and drag it so that when it peeled away, an entry form would be beneath it.

    How would I go about doing that?

  17. wow… clear tutorial and demo…. I want to try

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!