Анимированный фон для сайта на jQuery

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

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

<li><a href="" name="home">Главная</a></li>

<li><a href="" name="services">Контакты</a></li>

</ul>

</div>

</div>

</div>

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

Шаг 2. jQuery

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

$(document).ready(function () {

// Работает ли анимация в настоящее время

var animationsRunning = 0;

// Initial window width

var initialWidth = $(window).width();

// Функция упаковка кода.

var wrapFunction = function (fn, context, params) {

return function () {

fn.apply(context, params);

};

// Глобальные очереди функции

var funqueue = [];

// Массив элементов для анимации

var objects = {

'home': 'vertical',

'about': 'horizontal',

'services': 'slide'

}

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

function generateSlice(mainContainer, direction) {

// Получаем некоторые основные переменные

var direction = direction

var mainContainer = $('#' + mainContainer);

var sliceWidth = 90;

// Получить высоту и ширину окна в настоящее время

var height = screen.height;

var width = screen.width;

// Изменение ширины и высоты контейнера на высоту и ширину окна

mainContainer.css({

'width': width + 'px',

'height': height + 'px'

});

// Добавляем контейнер, который вызывает "кусочки", для каждого контейнера.

if (mainContainer.find('.slices').length < 1) {

mainContainer.append('<div class="slices"></div>');

}

// Дополнительные переменные

var incr = 0;

var theShadow = $(mainContainer).find('endShadow');

// Определяем какой стиль применить

if (direction == 'vertical') {

mainContainer.addClass('vertical');

// Если анимация вертикальная, нам нужно добавить вертикальные срезы.

if (mainContainer.find('.vertical').length < 1) {

mainContainer.children('.slices').append('<div class="vertical"></div>');

}

// Разделить ширины экрана к ширине среза, чтобы получить число срезов.

for (x = 0; x < (width / sliceWidth); ++x) {

mainContainer.find('.vertical').append('<div class="slice"> </div>');

}

} else if (direction == 'horizontal') {

// .... Полный код можно найти в исходниках.

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

$.each(objects, function (k, v) {

generateSlice(k, v);

});

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

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

function animation(container, direction) {

if (animationsRunning > 0) {

return false;

}

$('body > div').css({

'z-index': ''

});

$('body > div').removeClass('current-slide');

// Выведение содержания

$('.content').fadeOut();

// Длина анимации

var aLength = 500;

var direction = direction;

var animationType;

// Установить переменный контейнер

$container = $('#' + container);

// Изменение z index.

$container.css({

'z-index': '10'

});

$container.addClass('current-slide');

$container.find('.slice').each(function () {

// Случайное время для каждого кусочка

var randTime = Math.floor(Math.random() * (aLength + 100)) + (aLength - 100);

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

animationsRunning += 1;

$(this).animate(animationType, randTime, function () {

$(this).animate({

'boxShadow': 'none'

});

setTimeout(function () {

$container.children('.slice').addClass('noshadow');

$('body > div:not(#' + container + ') .slice').each(function () {

restartAnimation($(this));

});

$container.find('.content').fadeIn();

animationsRunning -= 1;

if (animationsRunning < 1 && funqueue.length > 0) {

(funqueue.shift())();

}

}, (aLength));

});

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

$('#menu a').click(function () {

if ($(this).attr('name') == 'home') {

if (animationsRunning < 1) {

animation('home', 'vertical');

} else {

funqueue.length = 0;

funqueue.push(wrapFunction(animation, this, ['home', 'vertical']));

}

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