Хотите яркий и динамичный фон для своего сайта? И чтобы на каждой странице разный? RandomColor – решение специально для вас! При помощи данной библиотеки легко сгенерировать JavaScript фон, состоящий из квадратов различного цвета.
И так, какие же возможности даёт нам этот скрипт? Как при его помощи получить динамически меняющийся JavaScript фон? Чтобы разобраться подключаем её к себе на страницу:
<script src="just.RandomColor.js" type="text/javascript"></script>
Теперь для начала работы нам необходимо сохранить экземпляр объекта randomColor в переменную:
var color = new just.RandomColor();
При помощи этой библиотеки мы можем получить случайно сгенерированный цвет в одном из четырёх форматах: HEX, RGB, RGBA, CSS. Для того чтобы добраться до самого цвета нужно воспользоваться свойствам value для каждой из функций кроме CSS.
color.toHex().value; // "39d3e5"
color.toRGB().value; // {r: 12, g: 156, b: 211}
color.toRGBA().value; // {r: 46, g: 195, b: 223, a: 0.2}
color.toCSS(); // rgba(46, 173, 213, 1)
Но это - не самый удобный формат записи. В большинстве случаев мы используем цвета в работе с CSS файлом. Если вместо value указать метод toCSS(), то получим рабочие форматы записей.
color.toHex().toCSS(); // "#31c3d3"
color.toRBG().toCSS(); // "rgb(16, 145, 217)"
color.toRGBA().toCSS(); // "rgba(54, 125, 127, 0.3)"
Ещё один метод, который есть в библиотеке, это - refresh(). Он тоже генерирует случайный цвет, но только непосредственно через функцию. В этом случае мы можем добавить метод к событию клика или скроллинга, например.
color.refresh().value; // {r: 20, g: 174, b: 168, a: 0.2}
Если вам требуется случайный цвет в каком-то диапазоне, то это можно осуществить, передав объект с параметрами.
var color = new just.RandomColor({
r: [30, 50],
g: [72,168],
a: [0.1, 0.7]
});
Последнее, что я хочу добавить про эту библиотеку, это то, что передав вторым параметрам length, можно получить массив сгенерированных цветов. В этом случаи все функции работают так - же, как и при генерации одного цвета. Однако необходимо учитывать, что возвращается именно массив.
Пример работы randomColor вы сможете увидеть в материалах «демо».