Введите доминирующий цвет из изображения в фон с помощью AdaptiveBackgrounds.js

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

AdaptiveBackgrounds.js это бесплатный плагин jQuery, который помогает вам легко адаптировать наиболее доминирующий цвет в вашем контенте как часть фона. Он был построен на вершине RGBaster, сделанные тем же разработчиком.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

По сути, это плагин для извлечения цветовой палитры изображения, чтобы получить доминирующий цвет. При первой загрузке страницы плагин извлекает цвет из изображения. Извлеченный цвет затем применяется к родительскому изображению. Вы можете увидеть, как это работает в этом GIF.
demo Начало работы
Для работы AdaptiveBackgrounds.js требуется библиотека jQuery. Хотя он построен на основе RGBaster, вам больше не нужно его включать. Вы можете получить файл плагина с его GitHub страница,

Затем включите все необходимые файлы в ваш проект следующим образом:


Адаптировать доминирующий цвет
Мы собираемся попробовать этот инструмент и использовать его, чтобы извлечь доминирующий цвет из этого изображения Двойная Арка сфотографировать Картик Раманатан, затем примените его к родительскому элементу.
двойная аркаДля того, чтобы доминирующий цвет был применен к элементу, вы должны поместить изображение как его потомок. Внутри тега img укажите атрибут data-adaptive-background, чтобы скрипт мог получить цвет:

Если вы непосредственно нанесете img на тело, то все тело будет нанесено с доминирующим цветом.

Затем, вызовите плагин, добавив этот маленький код JavaScript:

И поэтому к изображению применяется доминирующий цвет.
двойная арка послеДополнительные примеры и дополнительные настройки вы можете найти на сайте AdaptiveBackgrounds.js. документация стр.
Последняя мысль
С AdaptiveBackgrounds.js вы получите только статический цвет. Возможно, вы захотите придать своему фону немного больше цвета, чтобы привлечь внимание. Если вы это сделаете, проверьте AdaptiveBackgrounds.js демонстрационная страница для большего количества идей.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *