Анимированный градиент Granim.js

На этом уроке научимся применять анимированные градиенты, используя JavaScript библиотеку – Granim.js. Вы увидите, как просто работать с этой замечательной библиотекой, тем более, когда есть все примеры вариантов анимации на сайте. Вам останется, только копировать код, вставлять в свой проект , меняя или добавляя некоторые параметры.

Официальный сайт: https://sarcadass.github.io/granim.js/examples.html

Базовая анимация градиентов

Состоит из трёх двухцветных градиента, которые меняются по очереди. Количество градиентов и переходящих цветов может быть любым. Как правило, такую анимацию применяют к фону секций страницы, в том числе и к фону шапки. Анимированный градиент – хорошее решение для плоского дизайна, ведь однотонная секция просто скучна.

See the Pen Basic gradients animation with granim.js by porsake (@porsake) on CodePen.

Идентификатор у элемента (element) - #canvas-basic, должен быть один и тот же в HTML/CSS/JS коде.

Градиент может иметь четыре направления

• left-right: слева направо
• top-bottom: сверху вниз
• diagonal: по диагонали
• radial: из центра к краям

Замените в коде дефолтное значение на нужное вам.

Можно поменять длительность анимации градиента.

Заменить код цвета градиента.

Градиенты с картинкой и режимом наложения.

Это вариант, когда градиенты с двумя цветами накладываются на фоновое изображение. В примере по умолчанию, стоит режим – multiply (умножение). Можно поиграться с разными режимами смешивания, подобрав более эффектный.

See the Pen Gradients with an image with granim.js by porsake (@porsake) on CodePen.

Дополнительные параметры для options.image.

По умолчанию, изображение расположено в центре, по осям X и Y, но эти значения можно заменить на left, right, top, bottom.

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

Градиенты с маской изображения

Анимация применяется вовсе, не к текстовому логотипу, который прописан в HTML коде, а к графическому логотипу logo-mask.png. Вам надо, например в программе Photoshop сделать "дырку от бублика", то есть вместо букв создать прозрачную маску и сохранить в формате PNG с прозрачностью. Именно эта прозрачность, заполняющая контуры букв логотипа и заполняется анимированным градиентом.

Когда нужно создавать маску изображения? Во всех случаях, кроме прямоугольных и круглых правильных форм, когда фигуру нельзя создать средствами одного CSS и нужно задействовать графические изображения.

See the Pen Gradients with an image mask by porsake (@porsake) on CodePen.

Интерактивные градиенты

Это анимация градиентов, которая реагирует на события. В примере, при клике на ссылку, происходит замена цвета градиента. Область применения интерактивных градиентов, нам уже продемонстрирована. Например в шапке сайта, есть меню с ссылками, пользователь кликнув по ссылке, меняет цвет фонового градиента.

See the Pen Interactive Gradients by porsake (@porsake) on CodePen.

Требуется подключить библиотеку jQuery.

Такой вариант анимации, не может повторяться бесконечно, поэтому указываем параметр. На один клик – одна анимация.

Подключить библиотеку Granim.js можно через внешнюю CDN ссылку.

Или скачать файл granim.min.js, тогда путь до файла укажите свой.