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

Примеры используют JavaScript и Canvas для создания различных анимаций header’а. Каждый пример использует свой собственный файл JavaScript, но каждый из них имеет сходство. Каждый пример имеет:

• Цикл анимации на основе requestAnimationFrame

• Формы (круги, треугольники, линии), которые меняются для создания различных эффектов

Demo 1 отслеживает движение мышки на несенсорных устройствах. Demo1 и demo3 используют библиотеку анимации GreenSock GSAP.

При работе с анимацией в  header’е, есть пара проблем с производительностью, имейте это в виду:

• Интенсивное воспроизведение цикла анимации JavaScript, он может повлиять на производительность вашей страницы, если имеются другие тяжёлые JavaScript сценарии.

• Постарайтесь ограничить количество вычислений / операций, это нагружает процессор, вы размещаете свой анимационный цикл - это стабилизирует частоту кадров.

• Некоторые мобильные устройства не могут работать с Canvas, так что вам следует рассмотреть вариан  для мобильных устройств, таких, как статическое изображение.

Взгляните на предложенные варианты:

Изображение из demo 1 взято с ESO, оно было сделано с телескопа для астрономии (Vista), который позволяет снимать в инфракрасном спектре. Изображение из demo 2 взяли с уже знакомого вам ресурса Unsplash, отличный источник для высококачественных фотографий. Орнамент был сделан с использованием бесплатного набора Sable Kit из Pixel Buddha.

Перевод: Art

Оригинал: tympanus.net

Демо тут, исходники тут.