NeaDek(WAT) 
[мошенник]
(21 сен 2014, 16:40) (0/0)
[0]
[мошенник]
Ulitka,
ну если граммотно делать нарм смотреться будет
NeaDek(WAT) [мошенник]
(21 сен 2014, 15:49) (1/0)
[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:
архив
ну все ждем все дизы с загнутыми уголками
В первом посту в зимний период мы расскажем как можно создать маленькую, но весьма интересную хитрость, а именно эффект отгибающегося уголка для сайта с помощью скрипта м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:
архив
ну все ждем все дизы с загнутыми уголками
Прикрепленные файлы:
PROFIWM_COM_39_937028_angled-corner-for-site-with-mootools.rar (79.84 кб)
PROFIWM_COM_39_937028_1398602967_2014-04-27_165010.png (119.97 кб)
PROFIWM_COM_39_937028_angled-corner-for-site-with-mootools.rar (79.84 кб) PROFIWM_COM_39_937028_1398602967_2014-04-27_165010.png (119.97 кб) - 1 из 1
