Все для веб-дизайнера
Загнутый уголок для сайта с помощью MooTools
В первом посту в зимний период мы расскажем как можно создать маленькую, но весьма интересную хитрость, а именно эффект отгибающегося уголка для сайта с помощью скрипта мootools. Такую уловку можно встретить не часто, это и позволит сделать ваш сайт более уникальным. Идея состоит в том, когда пользователь наводит курсором мыши на данный угол, он отгибается, а за ним появляется нужная вам страница, на которой вы сможете разместить необходимую вам информацию.
В данном примере мы на скрытой странице будем использовать подписку на сайта. Для начала нам необходимо создать разметку HTML, выглядеть она будет следующим образом:
|
1 2 3 4 5 6 |
<div id="pageflip"> <a href="#"> <img src="page_flip.png" alt="" /> <span class="msg_block">описание</span> </a> </div> |
Данный код вставляем сразу после тега <body>. Тут создаем слой с названием pageflip и в него помещаем наполнение уголка. В нашем примере туда помещается ссылка в виде картинкы на RSS канал нашего сайта.
Теперь рассмотрим непосредственно сами стили CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<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>. Материал взят из зарубежного И представлен исключительно в ознакомительных целях.
Читайте также:
Интересно:
| Print article | Опубликовал admin 13.11.2011 в 18:26, в категории Mootools. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
-
Gleb Vernigorov
-
Gleb Vernigorov
Загрузка ...