Adaptive Backgrounds для jQuery: гармоничная цветовая палитра на автопилоте!

adaptive_backgrounds_lp

Этот плагин можно считать «топливом» для jQuery. Adaptive Backgrounds от Brian Gonzalez умеет анализировать цвета изображений на странице, определяет, какой из цветов преобладает над остальными, и окрашивает фон вашей страницы в соответствующий цвет. Поскольку Adaptive Backgrounds по умолчанию работает с ближайшим родительским элементом, вы можете реализовать поддержку нескольких фонов на одной и той же странице. Эффект будет впечатляющим.

Adaptive Backgrounds для jQuery: гармоничная цветовая палитра на автопилоте

Процесс использования Adaptive Backgrounds напомнил нам подсветки для телевизоров, которое в одно время было очень популярным, — цвет освещения менялся в зависимости от изображения, что показывалось на экране.

Идеальное совпадение: Adaptive Backgrounds для jQuery автоматически окрасит ваш веб-сайт
Поскольку веб-сайты — это далеко не телевизор, надо признать, что подобный эффект сработает не для каждого сайта. Adaptive Backgrounds считывает ваши изображения, находит доминантный цвет, извлекает его значение, и автоматически окрашивает ним фон для родительского элемента изображения. Чтобы увидеть эффект в действии, взгляните на демо по ссылке ниже.

Реализовать этот эффект достаточно просто. Как только вы встроили jQuery и скрипт в ваш проект, нужно будет запустить функционал следующим образом:

$(document).ready(function(){ $.adaptiveBackground.run() });

С этого момента скрипт начнет отслеживать цвета изображений, и применять их к data-атрибут data-adaptive-background. Этот атрибут затем прикрепляется к обычному img:

При помощи переменной (скажем, defaults) вы можете управлять поведением плагина. Это может быть необходимо, если вам нужно распространить эффект не только на ближайший родительский элемент, который будет исходным предшественником в дереве DOM, или если вам понадобится сохранить определенные цвета текстов. Затем переменная прикрепляется к команде run:

$.adaptiveBackground.run(defaults)

Поскольку плагин работает с canvas и imageData, он способен обрабатывать изображения, размещенные на том же домене, на котором размещается скрипт. Однако существуют обходные пути, которые помогут вам решить эту проблему. Дополнительно к обработке ваших повседневных img, Adaptive Backgrounds также умеет работать с фоновыми изображениями с помощью CSS. Для этого нужно будет воспользоваться дополнительным data-атрибутом data-ab-css-background:

 Изображение, которое вы не хотите принимать во внимание, просто будет обозначено соответствующим data-атрибутом. Можете представить более простой способ?