Эффект тайная страница, с помощью 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 не включается после влагии
11 лет назад
Спасибо за интересную идею, но таких страниц еще не видел. Как нибудь у себя сделаю такое на досуге.
11 лет назад
Большое спасибо. Блин, давно искал эту штуку… =)