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

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

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

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

Шаг 1. HTML

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

<ul id="menu">
 <li><a href="" name="home">Главная</a></li>
 <li><a href="" name="about">О нас</a></li>
 <li><a href="" name="services">Контакты</a></li>
</ul>

<div id="home">
 <div class="content">

 </div>
</div>
<div id="about">
 <div class="content">

 </div>
</div>
<div id="services">
 <div class="content">

 </div>
</div>

<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'
 }

$(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') {
 // .... Полный код можно найти в исходниках.

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);
});

$.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);

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));
});

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']));
 }

$('#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']));

}

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

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

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

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

Шаг 1. HTML

Шаг 2. jQuery

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

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

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

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

Шаг 1. HTML

Шаг 2. jQuery

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

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

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи