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

1.

[мошенник] 0.57

[автор] (21 сен 2014, 15:49) [1/0] [1] [отв] [спам] [под] +1 | -1

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

В данном примере мы на скрытой странице будем использовать подписку на сайта. Для начала нам необходимо создать разметку HTML, выглядеть она будет следующим образом:
<div id="pageflip">
<a href="#">
<img src="page_flip.png" alt="" />
<span class="msg_block">описание</span>
</a>
</div>

Теперь рассмотрим непосредственно сами стили 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:
<script type="text/javascript" src="mootools-1.2.3-core-jm.js"></script>
<script type="text/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,$$);
</script>

Я полагаю, что вы уже догадались, что данный код необходимо поместить между тегами
<head></head>
Добавлено 21.09.14 в 15:49:23:
скрин
Добавлено 21.09.14 в 15:49:36:
архив
ну все ждем все дизы с загнутыми уголками