Думаю, ни для кого не секрет, что за последние несколько лет резко увеличилось число сайтов, использующих различные визуальные эффекты.
Хорошо это или плохо, разговор отдельный, но, наверное, все согласятся, что грамотное использование этих эффектов позволяет создать красивый web сайт с которым легко и приятно работать.
В этой статье мы рассмотрим пример использования очень интересного эффекта из библиотеки ScriptAculous – морфинга.
По определению, морфинг – это плавное преобразование одного объекта в другой.
Он очень часто используется в компьютерных играх и кинематографе.
К сожалению, возможности JavaScript в плане работы с графикой значительно скромнее, чем у библиотек вроде DirectX или программ нелинейного видеомонтажа. Т.е. вы не сможете сделать прямоугольный блок с текстом круглым или плавно преобразовать один шрифт в другой.
Тем не менее, можно изменить цвет и размеры блоков и шрифтов, их границы, фон и т.п.
Как это работает
Прежде всего, нужно четко понимать, что эффект морфинга применяется к стилям элементов web страницы, а не самим элементам.
Например, у нас есть блок с черным фоном:
<div id="textBlock" style="background-color:#000000">...</div>
И нам нужно плавно изменить его на белый. Для этого напишем функцию changeBG().
function changeBG() {
new Effect.Morph('textBlock',
{
style:"background-color:#ffffff",
duration:2
});
}
Теперь, при вызове функции, цвет фона textBlock будет плавно изменяться на белый в течении двух секунд.
Важно. ScriptAculous не работает с внешними CSS файлами, поэтому стили должны быть заданы в атрибуте style элемента, к которому применяется эффект.
Переходим к примеру
Допустим, нужно организовать плавную смену картинок, которые отличаются по размеру.
Примечание. Существует масса библиотек, которые позволяют легко и красиво решить эту задачу, но сегодня речь не о них.
Картинки мы разместим с помощью тега img (стандартный способ), а сам тег будет находиться внутри контейнера <div id="imgContainer">. Зачем это нужно я сейчас объясню.
Допустим, мы хотим показать рисунок меньшего размера, чем предыдущий. Т.к. размер должен изменяться плавно, то какое-то время вокруг рисунка будет пустое пространство, что не очень красиво.
Чтобы этого избежать мы сделаем так:
1) убираем старый рисунок;
2) плавно изменяем контейнер, до размеров нового рисунка (в это время посетитель будет видеть цвет фона контейнера или какую-нибудь анимацию);
3) показываем новый рисунок.
Теперь посмотрим код этого примера.
В файле testMorph.html находится разметка страницы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>Тестирование эффектов Script.aculo.us</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="testMorph.js"></script>
</head>
<body>
<p>Щелкните по рисунку чтобы изменить изображение</p>
<div id="imgContainer"
style=" width:300px; height:225px; background-image:url('loader.gif'); background-repeat:no-repeat; background-position: center center; border:solid 1px #484e58;">
<img id="myImg" src="IMG_1.jpg" alt="картинка" onclick="nextImg()" />
</div>
</body>
</html>
Как видите, при клике по картинке (строка 16) будет вызвана функция nextImg(), которая находится в файле testMorph.js:
function nextImg() {
new Effect.Morph('imgContainer',
{
style:"width:450px; height:338px",
duration:1,
beforeStart: function(o) {
$('myImg').src="bg.png";
},
afterFinish: function(o) {
$('myImg').src="IMG_3.jpg";
}
});
}
Разберем эту функцию подробнее. Прежде всего, мы создали эффект (строка 2).
Затем, в его параметрах указали длительность эффекта (строка 5) и новые размеры контейнера (строка 4).
После этого, в параметрах beforeStart и afterFinish объявили две анонимные функции, которые меняют рисунки.
Примечание: рисунок bg.png имеет размер 1х1 пиксел и нужен только для того, чтобы браузер не показывал текст из атрибута alt тега img.
Как видите, эффект довольно удобный.
Если вы хотите поэкспериментировать, можете скачать исходный код примера.
Или посмотреть online demo.
