Итак, наступает большой праздник “День победы”, одним из символов которого является конечно же праздничный салют. Как раз сегодня натолкнулся на скрипт fireworks.js, который позволяет добавлять яркие, красочные салюты на веб страницу.

Автор этого скрипта также является автором библиотеки SoundManager, для работы со звуком через JavaScript (о ней я недавно написал статью), поэтому не удивительно, что феерверк сопровождается замечательными звуковыми эффектами.

Основные возможности скрипта:

• Много разных вариаций формы и цвета феерверка
• Легкий в конфигурации API для добавления дополнительных эффектов
• Управляемые скриптом звуковые эффекты при помощи SoundManager API
• Чередующаяся анимация (позволяет легко устанавливать последовательность феерверков)
• Эффект звукового панорамирования, в зависимости от расположения салюта на странице.

Попробовать скрипт в работе можно здесь.

С праздником Вас, и до скорых встреч!

Морфинг, это визуальный эффект, позволяющий плавно преобразовать внешний вид одного элемента в другой. Это не самый распространенный эффект, но тем не менее иногда бывает очень кстати.

В Mootools, морфинг выполняется при помощи класса Fx.Morph, который имеет следующий синтаксис:

var myFx = new Fx.Morph(element[, options]);

Здесь, element - элемент, или его ID; options - дополнительные опции, как то скорость преобразования (duration) и его тип (transition).

Преобразование выполняется при помощи функции Morph.start(), которая принимает в качестве аргумента либо имя класса, либо объект со стилями, которые необходимо установить для объекта:

var myEffect = new Fx.Morph('myElement', {duration: 'short', transition: Fx.Transitions.Sine.easeOut});

myEffect.start({
    'height': 100,
    'width': 300
});

В этом примере, для скорости указан параметр “short”, что значит быстрый переход, для параметра transition установлено значение Sine.easeOut (подробнее о нем см. здесь). В функцию start() передан объект с двумя свойствами height и width, это значит что объект изменит размер с текущих значений высоты до 100 и 300 пикселей соответственно.

Читать дальше »

Не так давно я написал заметку о 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), предназначены для придания специальных эффектов изображениям - создание закругленных углов, превращение изображений в слайды, создание изображений с размытыми границами и многое другое.

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

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

Читать дальше »

В этом уроке я покажу как сделать плавно открывающуюся панель используя библиотеку 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, который позволяет добавлять эффект зеркального отражения к изображениям на web-странице. Эффект создаётся при помощи объекта Canvas на браузерах, которые его поддерживают, в Internet Explorer вместо Canvas использются фильтры Opacity (эффект прозрачности) и FlipV (зеркальное отображение). Конечный результат выглядит следующим образом:

Читать дальше »