Автоматическая генерация градиентов из изображений

Автоматическая генерация градиентов из изображений

5 сентября 2016

Если вы пользуетесь iTunes, то наверняка обращали внимание как фон подстраивается под цвета обложки активного диска, и насколько гармонично это выглядит.

Топ 10 продающих лендингов для Вордпресс

Признаюсь, у меня никогда не стояло задачи реализовать нечто подобное для веб. Но на днях мне попалась JavaScript-библиотека от Ben Howdle, которая автоматически генерирует градиенты из двух доминирующих цветов изображения. Оказывается с её помощью можно с лёгкостью достичь схожего с iTunes эффекта.

Библиотека Grade.js

GitHub Демо

Использование Grade.js

Все как обычно, ничего нового. Подключаем библиотеку grade.js, инициируем её с помощью метода addEventListener() и задаём имя класса с фоном которого мы будем работать. В примере ниже это gradient-wrap.

<!--the gradient is applied to this div as a background-image-->
<div class="gradient-wrap">
 <!--this inner image is used to create the gradient-->
 <img src="./samples/good-dinosaur.jpg" />
</div>
 
<script src="../dist/grade.js"></script>
<script type="text/javascript">
 window.addEventListener('load', function(){
 Grade(document.querySelectorAll('.gradient-wrap'))
 })
</script>

Как видим, все достаточно просто.

Область применения эффекта очень широка. Я думаю, он отлично подойдёт для тех же медиаплееров, различных каталогов, галерей, слайдеров и т.п.

Всё самое новое и интересное я публикую в своём Телеграм-канале. Подписывайтесь!

Популярное в этом месяце
Иван Данилин
Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

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

Услуги фрилансеров по фиксированной цене — 500 р.
Подробнее