Загнутый уголок для сайта с помощью MooTools

В первом посту в зимний период мы расскажем как можно создать маленькую, но весьма интересную хитрость, а именно эффект отгибающегося уголка для сайта с помощью скрипта мootools. Такую уловку можно встретить не часто, это и позволит сделать ваш сайт более уникальным. Идея состоит в том, когда пользователь наводит курсором мыши на данный угол, он отгибается, а за ним появляется нужная вам страница, на которой вы сможете разместить необходимую вам информацию.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

В данном примере мы на скрытой странице будем использовать подписку на сайта. Для начала нам необходимо создать разметку HTML, выглядеть она будет следующим образом:

<span class="msg_block">описание</span>

</a>

</div>

Данный код вставляем сразу после тега <body>. Тут создаем слой с названием pageflip и в него помещаем наполнение уголка. В нашем примере туда помещается ссылка в виде картинкы на RSS канал нашего сайта.

Теперь рассмотрим непосредственно сами стили CSS:

#pageflip {

position: relative;

}

#pageflip img {

width: 50px; height: 52px;

z-index: 99;

position: absolute;

right: 0; top: 0;

-ms-interpolation-mode: bicubic;

}

#pageflip .msg_block {

width: 50px; height: 50px;

position: absolute;

right: 0; top: 0;

background: url(subscribe.png) no-repeat right top;

text-indent: -9999px;

}

И последним шагом будет, непосредственно, анимация с помощью скрипта 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,$$);

</script>

Я полагаю, что вы уже догадались, что данный код необходимо поместить между тегами <head></head>. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.