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

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

Шаг 1. HTML

Для начала мы разместим несколько DIV в нашем HTML-файл. Они будут выступать в качестве контейнеров для каждого из наших элементов. В этих контейнерах, мы будем вставлять необходимой контент, который при этом будет содержать любой родовой материал, который можно добавить на свою страницу. Звучит страшно, а выглядит все просто.

С разметкой закончили, детально все потрогать можно в исходниках.

Шаг 2. jQuery

Практически вся анимация реализована с помощью библиотеки jQuery, нам необходимо создать очередь для анимации, которая будет выводить так называемые «пластины», которые будут плавно появляться в качестве фона.

Мы используем for для получения срезов в зависимости от ширины экрана. Я установим размер экрана, который будет  изменяться в зависимости от экрана, это весьма актуально в связи с новыми тенденциями адаптивности в веб-дизайне. Кроме этого для полосок будет устанавливаться небольшая тень.

Далее нам необходимо запустить  каждую функцию на основе переменной объекта.

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

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

Затем мы проверяем, в каком направлении движется и запускается анимация. Анимация имеет следующий вид.

Также мы будем использовать меню, которое при активации пункта будет запускать анимацию.

Такой вариант организации фона отлично подойдет для портфолио или сайта-визитки. Скользящие фоновые панели несомненно заинтригуют посетителя сайта оригинальностью, а вам это только на руку.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: