Эффект тайная страница, с помощью MooTools
10 сентября 2009 года, Размещено в категории: jQuery / MooTools
Возможно, Вы уже встречали эти тайные странички на сайтах, когда нажимает на угол сайта и выкатывается не большая страница, на которой находится какая-нибудь рекламная или иная информация. Сегодня я покажу как сделать ее с помощью фреймворка MooTools.
XHTML код:
Первый DIV у нас как контейнер включает в себя изображения и DIV "Сообщение".
СSS - код:
Не забываем что CSS код нужно вставить между тегом <head></head> или в отдельный CSS файл.
#page-flip {
position:relative;
right:0;
top:0;
float:right;
}
#page-flip-image {
width:50px;
height:52px;
z-index:99;
position:absolute;
right:0;
top:0; -ms-interpolation-mode:bicubic;
}
#page-flip-message {
width:50px;
height:50px;
overflow:hidden;
position:absolute;
right:0;
top:0;
background:url(subscribe.gif) no-repeat right top;
}
MooTools Javascript:
Нужно также вставить между тегом <head></head>
(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,$$);
Первая строчка кода это мы прикрутили Фреймворк MooTools (mootools-1.2.3-core-jm.js), этот файл есть в архиве.
Мой блог находят по следующим фразам
• с какой стороны правильно расположить картинку а с какой текст
• на всех сайтах хорошех флеш плеер
• jquery как сделать диалог загрузки для xml файла
• крутой фон
• можно ли pikachoose отображать html текст
• htc explorer не включается после влагии
8 лет назад
Спасибо за интересную идею, но таких страниц еще не видел. Как нибудь у себя сделаю такое на досуге.
8 лет назад
Большое спасибо. Блин, давно искал эту штуку… =)