Как-то путешествуя со страницы на страницу попал на один немецкий сайт, на котором нашел интересный скрипт, который демонстрировал плавный переход между текстом и плавно сменял картинки. Скрипт стоил $249. Сообразив, что за такую сумму, это должен быть самый лучший скрипт на JavaScript в мире, я написал собственный скрипт, работающий ничуть не хуже.
Эффект плавного перехода заключается в том, что один блок плавно сменяет другой, при этом один затухает, а другой наоборот плавно появляется, все это происходит одновременно и производит довольно красивое впечатление. Причем не важно, что будет в этих блоках, текст, форма или картинка.
Для создания данного эффекта нам естественно понадобится более одного блока :)
Нам необходимо решить следующие задачи:
1. Разместить два блока в одной позиции. В качестве блоков используем компонент div. Свойство position: absolute позволяет размещать блок в любом месте экрана с указанием координат left и top.
2. Разместить ссылку, которая будет вызывать процедуру плавной смены блоков next() (реализуем эту ссылку так же в виде компоненты div).
Текст кода на JavaScript выглядит достаточно просто:
<script language=JavaScript>
var m = new Array(0,100);
var t = new Array();
function next() {
m[0]+=1;
m[1]-=1;
document.getElementById("a2").style.filter="alpha(opacity="+m[0]+")";
document.getElementById("a1").style.filter="alpha(opacity="+m[1]+")";
t[0] = setTimeout("next()",5);
if (m[0]>99) clearTimeout(t[0]);
}
</script>
HTML код:
<div id=a1 style='position: absolute; top: 100px; left: 100px'>
<img src=1.jpg>
</div>
<div id=a2 style='position: absolute; top: 100px; left: 100px; filter: alpha(opacity=0)'>
<img src=2.jpg>
</div>
<div onclick='next()' style='cursor: hand;'>
Посмотреть эффект
</div>
Необходимо заметить, что данный эффект основан на применении фильтров в IE, поэтому в Opera или Mozilla данный эффект работать не будет.