Анимация букв

Мигающие буквы текста

На этой странице показываю очень интересный пример анимации букв текста, который удалось создать с помощью JavaScript во время повторения обучающих курсов по этому языку программирования.

Буквы в тестовом примере "мигают" одна за другой, т.е. меняют свои цвета на заданные, а потом снова становятся прежними.
Специально прописал им контрастные цвета анимации, чтобы всё чётко видеть.

Базовый цвет - голубой, который меняется на красный, а потом жёлтый, и снова возвращается к базовому, т.е. становится голубым.

Пример анимации букв

Данный пример текстовой анимации особенно интересен тем, что он весь полностью написан на JavaScript, т.е. текст примера находится в коде, и выводится скриптом.

Единственное, что я сделал через HTML, - заключил весь javascript-код в тэги <center>, чтобы пример текста с мигающими буквами располагался посередине.

Описание кода примера

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

Однако!

Помнить!  Чтобы анимация букв была полноценной, в выводимом скриптом тексте должно быть НЕ МЕНЕЕ 3-ёх символов, т.е. не менее количества прописанных в коде цветов. Сейчас в нём задано три цвета: один базовый и два для смены.

Ещё.

Если в переменной n (сейчас - 0) поставить, к примеру, 5, то анимация букв начнётся с 5-ого символа, НО(!) только 1 раз в самом начале, а потом всё станет, как обычно.

И последнее.

В скрипте (где требуется) одинарными кавычками отделил фрагменты кода HTML от кода JavaScript.

Другие примеры текстовой анимации

Ещё один интересный, но более сложный пример анимации текста находится в разделе jQuery и называется: "Постепенное появление текста" (откроется в новом окне).

А узнать о самых простых способах работы с текстом и текстовой анимацией, в том числе, можно на странице "Текстовые эффекты" (тоже в новом окне).

ВВЕРХ