Как-то путешествуя со страницы на страницу попал на один немецкий сайт, на котором нашел интересный скрипт, который демонстрировал плавный переход между текстом и плавно сменял картинки. Скрипт стоил $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>