Скрипты зеркального отражения

20 апреля 2008 MooTools, Эффекты 0

Не так давно я написал заметку о reflection.js – скрипте, создающем зеркальные отражения для изображений. Пару дней назад я нашел похожий скрипт Reflection.js for Mootools, который может делать то же самое, но с библиотекой Mootools, а вчера наткнулся на еще более продвинутый скрипт – reflex.js. Помимо создания простого отражения, reflex.js может поворачивать их вокруг своей оси, создавая эффект Cover Flow.

Параметры прозрачности, отступ отражения, границы изображений, углы наклона – всё это очень легко настраивается. Нужно просто указать необходимые классы для изображений.

Дополнительно, в дистрибутиве имеется скрипт cvi_reflex_lib.js, который добавляет еще больше гибкости. Подключив его вместо reflex.js, вы сможете заставить изображения реагировать на действия пользователя – например, если пользователь наводит мышкой на изображение, ее тень изменяет прозрачность, а изображение слегка поворачивается.

Скачать скрипт и посмотреть демо и инструкции можно здесь. Также советую посмотреть список проектов на этом же сайте: http://www.netzgesta.de/cvi/. Все перечисленные там скрипты (их там 12), предназначены для придания специальных эффектов изображениям – создание закругленных углов, превращение изображений в слайды, создание изображений с размытыми границами и многое другое.

Как сделать полупрозрачный ролловер на jQuery

12 апреля 2008 jQuery, Эффекты 1

В этой статье я покажу простой метод создания полупрозрачной подсветки (т.н. ролловер) элементов меню, который создает эффект мягкого фонового свечения. Эффект работает во всех браузерах, включая IE 6 – это возможно за счет использования полупрозрачных изображений в формате png и скрипта pngfix для вышеупомянутого браузера. Результат будет примерно следующим:

Этот метод был создан Брюсом Крозе (Bruce Kroeze), статью которого можно найти здесь.

<< читать дальше >>

Туториал – открывающаяся панель на MooTools

23 марта 2008 MooTools, Эффекты 21

В этом уроке я покажу как сделать плавно открывающуюся панель используя библиотеку MooTools.

Шаг 1: HTML код.

<h2><span><a href="#" id="toggle">Панель</a></span></h2>
<div id="section">
<div>
<!-- Содержимое панели  -->
</div>
</div>

Как видите, код очень простой. Вложенный в заголовок <span>, а также <div> внутри открывающейся панели (id=”section”) нужны только для создания закругленных углов.

Шаг 2: CSS – устанавливаем стиль панели.

div.container{
	margin:30px auto;
	width:350px;
}
h2{
	margin:0px;
	padding:0px;
	border:0px;
}
h2{
	color:#FFFFFF;
	font-size:13px;
	display:block;
	background:url(img/h2_bg.gif) top left no-repeat #9A9A9A;
}
h2 span{
	padding:5px 10px;
	background:url(img/h2_span_bg.gif) top right no-repeat;
	display:block;
}
h2 a:link, h2 a:visited{
	color:#FFFFFF;
	text-decoration:none;
	display:block;
}
#section {
	background:url(img/section_bg_left.png) bottom left  no-repeat #EEEEEE;
	font-size:12px;
}
#section div{
	background:url(img/section_bg_right.png) right bottom no-repeat;
	padding:10px;
}

Шаг 3: добавляем эффект “toggle” из MooTools

Добавляем ссылку на библиотеку MooTools в раздел <head>…

<script type="text/javascript" src="mootools.svn.js"></script>

Затем добавляем следующий код…

<script type="text/javascript">
window.addEvent('domready', function(){
	var mySlide = new Fx.Slide('section');
	$('toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
});
</script>

Таким образом, при каждом щелчке на заголовке, панель будет плавно появляться/исчезать.

Смотреть демо.

Скачать туториал.

Источник – woork.blogspot.com

Reflection.js – создание зеркального отражения

16 февраля 2008 Эффекты 6

Сегодня я представляю вашему вниманию скрипт Reflection.js, который позволяет добавлять эффект зеркального отражения к изображениям на web-странице. Эффект создаётся при помощи объекта Canvas на браузерах, которые его поддерживают, в Internet Explorer вместо Canvas использются фильтры Opacity (эффект прозрачности) и FlipV (зеркальное отображение). Конечный результат выглядит следующим образом: