Фон градиент в iTunes

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

5 сентября 2016 108

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

CodeCanyon: Лучшие плагины для WordPress
CodeCanyon: Лучшие плагины для WordPress

Признаюсь, у меня никогда не стояло задачи реализовать нечто подобное для веб. Но на днях мне попалась 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>

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

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

Автор: Иван Данилин

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

Комментарии

Разгоните свой WordPress

Хостинг-провайдер номер один в России — REG.RU

Подробнее