Переливающийся фон

Пример сменяющегося фона

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

Урок по его созданию нашёл в дополнительных материалах учебного курса по JavaScript.

Испытываю действие данного эффекта в таблице шириной 450px, а высоту строки с тремя ячейками, где меняется фоновый цвет, задал 300px.

* * *

* * *

JavaScript-код переливающегося фона

Здесь, в этой части страницы прописал код JavaScript, приводящий в действие показанный пример переливающегося фона на сайте с помощью функции iridescent().

Естественно, что его не видно на HTML-странице, так он заключён в тэги <script>, но он здесь.

Можно было бы вырезать этот javascript-код в отдельный файл для освобождения места в HTML-коде страницы, но делать этого я не стал.

Время смены каждого цвета фона установил методом объекта Window SetTimeout( , ) в котором через запятую указывается: имя функции, и на сколько миллисекунд отложить её выполнение.

Задержку выполнения скрипта установил в 200 мс (миллисекунды). Пробовал 100 - очень быстро, 300 - тоже ничего, но медленнее, чем сейчас. Оставил 200.

*Prim.  В коде функции, в конструкции else if использовал тернарный оператор - ? Его можно использовать вместе с упомянутой конструкцией для сокращений. Назначение и действие обоих одинаково.
Только не забывать! Данный оператор (вопрос) работает всегда в паре с другим тернарным оператором - : (двоеточие).
Подробно об их использовании смотрите здесь: "Тернарные операторы" (в новом окне).

Ну вот и всё! Таблица для смены фона в ней готова, javascript-код написан, осталось только запустить работу скрипта.

Настройка JavaScript-кода смены фона

Сначала скажу о настройке этого кода самое главное!

Изучая, естественно, пробовал убрать или добавить количество ячеек в таблицу. Для этого нужно изменить и HTML, и javascript-код.

Приведу алгоритм изменения кодов на примере увеличения количества ячеек до 5-ти.

Как в HTML добавляются ячейки, думаю, и так ясно. А вот с JavaScript-кодом уже несколько сложнее. Но ничего. Справился!

Весь процесс изменения скрипта состоял из 2-ух шагов.

1. В функции iridescent() сделал цикл до 5-ти, а НЕ до 3-ёх, как это прописано в коде действующего на данной странице примера переливающегося фона.

2. Скорректировал объявленные переменные вот таким образом:
var chidn = new Array(160,130,100,70,40);
var step = new Array(10,10,10,10,10);
var chway = new Array(step[0], step[1], step[2], step[3], step[4]);
var tone = new Array(1,1,1,1,1);

Важно! Для плавной смены цветов, "шаг" в массиве chidn должен быть постоянным. Любым, но постоянным! К примеру, так: var chidn = new Array(80,90,100,90,80,70);.

И насчёт использования своих цветов, в уроках учебного курса говорилось, что ничего не выйдет.

Однако, кое-что всё же сделать можно! Смотрите дальше.

Сейчас настроена оптимальная смена цветов фона. Они переходят друг в друга по всему спектру цветов, но плавно, т.е. без резких "скачков" цвета.

За это отвечает переменная step в строчке кода var step = new Array(10,10,10);.

Если же в ней заменить параметры на, скажем, такие: var step = new Array(10,30,50);, то переход цветов станет похож на ёлочную гирлянду.   Лучше оставить, как есть.

А вот экcперименты над значениями параметров массива переменной chidn дали хороший результат.
Пробовал ставить их в 200,170,140, а после в 100,150,200, задавал другие комбинации значений - всегда получалось довольно интересно.

Единственное, о чём нужно помнить(!): в js-коде прописан ограничитель использования цифровых значений от 0 до 255, что, впрочем, естественно для десятичной цветовой системы RGB (*цвета в фотошоп).

И ещё о настройке кода!

Довольно интересно получается, если удалить часть параметров из массива переменной hexc, отвечающей за шестнадцатеричную цветовую систему HEX (*цвета в HTML).

К примеру, я, изучая настройку кода, удалял цифры 3,4,5, что приводило к интересному результату.
Таблица переливалась цветами сначала в одном цветовом диапазоне, скажем, в синем, "замирала" на чуть-чуть, а потом начинала переливаться уже в другом цвете. Мне, честно говоря, такой эффект понравился больше всего!

Однако здесь, на сайте, решил оставить код переливающегося фона в базовой настройке. В той, которая объяснялась в уроках учебного курса.

Запуск функции

А здесь, в данном месте страницы, я прописал короткую команду запуска функции, приводящей в действие такой чрезвычайно интересный эффект смены фона.

Выглядит эта команда так: <script type="text/javascript">iridescent();</script>

Короче, всё как обычно: HTML-код места (здесь таблица), где будет проявляться эффект; javascript-код; его запуск отдельной строчкой js-кода.

Послесловие

Показал Вам интересный пример создания переливающегося фона на своём сайте. Уметь создавать и работать с фонами, автоматически меняющими цвет, полезно!

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

И кстати! Скрипту всё равно, какого размера будет таблица или блок.

Создать подобный эффект для любого HTML-сайта очень просто!   Для этого достаточно зайти на страницу "Полезное" (откроется в новом окне).

Там Вы легко сможете найти и скачать полный комплект кода (бесплатно и без всяких регистраций), и установить в нужное место на своём сайте.

Ну, а как этот код работает, - Вы видели, и что с ним делать - знаете.

ВВЕРХ