Page Peel con Mootools (efecto pliegue esquina)

Algún tiempo atrás mencionabamos un efecto de pliege de página con un plugin para jQuery. Ahora David Walsh nos trae uno con ayuda de Mootools inspirado en sohtanaka.com.

Cuando posamos el cursor en alguna esquina de la página, éste se pliega mostrando un contenido en la parte posterior.

En la parte HTML, donde se aplicará en efecto.

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

La función en JavaScript, recordar descargar la librería Mootools.

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

Interesante efecto para mostrar algún contenido extra en nuestro blog ó web con mucho estilo.

Mas info | Demo