Page Peel Effect Using MooTools

Written by David Walsh on Tuesday, September 8, 2009

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.

View Demo

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.

View Demo

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

Download PDF

Follow via RSS Epic Discussion

September 08 / #

Marcel says:

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

September 08 / #

Ahmad Azimi says:

Hi,

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

September 08 / #

Adriaan says:

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

September 08 / #

Darkimmortal says:

-ms-interpolation-mode:bicubic;

Cool, that should come in handy :>

September 08 / #

Sean McArthur says:

-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.

September 09 / #

Fabian Beiner says:

@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)