Отправляет email-рассылки с помощью сервиса Sendsay

Программирование на JavaScript

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июль 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

0 подписчиков
-4 за неделю
←   Все выпуски   →

Скрипт, воспроизводящий анимацию на web-странице в виде волнообразного движения текста.


Выпуск 10
Дата выпуска 29.06.2007
Подписчиков 13610
Сайт рассылки codeguru.ru
Архив рассылки http://codeguru.ru/subscribe/js/archive/
Сегодня в номере
  
Книга
JavaScript. Освой на примерах (+ CD-ROM)

От ведущего

Здравствуйте, уважаемые читатели.

Перед вами еще один выпуск рассылки "Программирование на JavaScript". Как всегда, вы можете слать замечания относительно оформления и содержания рассылки, а также сайта рассылки ее ведущему.

Статьи

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

Волнообразное движение текста

Принцип воспроизведения эффекта, который создает рассматриваемый далее скрипт, состоит в периодическом изменении размера шрифта каждого символа надписи. Размер шрифта символов является функцией синуса от текущего времени и позиции символа в строке. Далее, на рисунке 1.1 приведено изображение, иллюстрирующее работу скрипта в некоторый момент времени.

Рисунок 1.1 Работа скрипта.

Вы можете увидеть скрипт в действии, открыв в браузере документ (демо-пример), приложенный к статье. Скрипт внедрен в тело этого документа. Полный листинг скрипта приведен далее:

Код
var nPeriod     = 2;    // количество периодов синусоиды
var nMaxSize    = 64;   // максимальный размер шрифта
var nMinSize    = 12;   // минимальный размер шрифта

var strText     = "Волнообразно движущийся текст"; // текст надписи


// --

var fPhase      = 0.0;
var aoChars     = new Array();

var nSteps      = strText.length;
var fStep       = 2 * Math.PI * nPeriod / nSteps;
var nDy         = (nMaxSize + nMinSize) / 2;
var nAmp        = (nMaxSize - nMinSize) / 2;

// --

function OnTimer()
{
    for(var i = 0; i < nSteps; i++)
    {
        var nSize = Math.ceil(Math.sin(fStep * i + fPhase) * nAmp + nDy);
        aoChars[i].style.fontSize = nSize.toString(10) + "px";
    }

    fPhase += fStep;
}

// --

for(var i = 0; i < nSteps; i++)
{
    var oSpan = document.createElement("SPAN");

    oSpan.appendChild(document.createTextNode(strText.substring(i, i + 1)));

    document.getElementById("ID_ANIMATE").appendChild(oSpan);

    aoChars[i] = oSpan;
}

// --

OnTimer();
window.setInterval(OnTimer, 100);

Принцип работы скрипта основан на создании множества элементов SPAN, содержащих по одному символу текста, анимацию которого необходимо выполнять, а затем - изменении размера шрифта каждого из символов в обработчике событий таймера.

Как можно видеть из приведенного листинга, создание элементов SPAN, содержащих символы надписи, а также запуск таймера производится при инициализации скрипта. Создаваемые элементы SPAN добавляются в элемент SPAN с атрибутом ID, равным ID_ANIMATE, определенный при помощи HTML-разметки:

Код
<SPAN ID="ID_ANIMATE"></SPAN>

Обработчиком событий таймера служит функция OnTimer. В ней в цикле перебираются DOM-объекты элементов SPAN, содержащих символы надписи, и для каждого из них производится вычисление и установка размера шрифта путем изменения свойства fontSize объекта style. Размер шрифта является функцией синуса и вычисляется на основании порядкового номера символа в строке, параметров синусоиды, которые хранятся в переменных, определенных в начале скрипта и значения фазового сдвига (переменная fStep), который наращивается при каждом вызове OnTimer.

Описание назначения переменных, определенных вначале скрипта, приведено далее, в таблице 1.1.

Таблица 1.1
Переменная Описание
nPeriod Задает количество периодов синусоиды (количество периодов искривлений, которым будет подвергнута надпись).
nMinSize Определяет минимальный размер шрифта символов.
nMaxSize Определяет максимальный размер шрифта символов.
strText Задает текст надписи.
nAmp Содержит значение половины амплитуды синусоиды.
nDy Содержит значение среднего размера шрифта.
nSteps Содержит количество символов надписи.
fStep Содержит значение приращения угла для каждого символа, исходя из количества периодов синусоиды и количества символов.
fPhase Содержит текущее значение фазового сдвига синусоиды.
aoChars Массив, хранящий ссылки на DOM-объекты элементов SPAN, содержащих символы надписи.

При помощи изменения значений переменных nPeriod, nMinSize, nMaxSize, strText вы можете задавать параметры работы скрипта.

Автор статьи: Вахтуров Виктор

В избранное