Эффект тайная страница, с помощью MooTools

10 сентября 2009 года, Размещено в категории: jQuery / MooTools

MooTools

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

demoскачать

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 не включается после влагии






2 комментария

  • 8 лет назад Ответить

    Спасибо за интересную идею, но таких страниц еще не видел. Как нибудь у себя сделаю такое на досуге.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: