Анимированный фон для сайта на jQuery
Фон отыгрывает далеко не последнюю роль с создании сайта, ведь правильно подобрана цветовая гамма позволяет выделить необходимую информацию на сайте. Опытные веб-мастера должны понимать всю важность данного элемента и учитывать психологию цвета, которая будет гармонично сочетаться с остальными элементами при этом не раздражать посетителя. Знаю множество примеров, в которых начинающие веб-мастера делали роковую ошибку, подбирая не правильный цвет своего ресурса, при этом текст плохо читался, или другие, важные элементы не было видно.
Сегодня мы рассмотрим весьма интересный подход к реализации фона для сайта, а именно создадим анимированный фон, который будет изменяться при активации определенного пункта меню, все будет происходить с помощью весьма интересной анимации, а правильно подобранные цвета дополнять целостность заставки.
Шаг 1. HTML
Для начала мы разместим несколько DIV в нашем HTML-файл. Они будут выступать в качестве контейнеров для каждого из наших элементов. В этих контейнерах, мы будем вставлять необходимой контент, который при этом будет содержать любой родовой материал, который можно добавить на свою страницу. Звучит страшно, а выглядит все просто.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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> |
С разметкой закончили, детально все потрогать можно в исходниках.
Шаг 2. jQuery
Практически вся анимация реализована с помощью библиотеки jQuery, нам необходимо создать очередь для анимации, которая будет выводить так называемые «пластины», которые будут плавно появляться в качестве фона.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$(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 для получения срезов в зависимости от ширины экрана. Я установим размер экрана, который будет изменяться в зависимости от экрана, это весьма актуально в связи с новыми тенденциями адаптивности в веб-дизайне. Кроме этого для полосок будет устанавливаться небольшая тень.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
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') { // .... Полный код можно найти в исходниках. |
Далее нам необходимо запустить каждую функцию на основе переменной объекта.
1 2 3 |
$.each(objects, function (k, v) { generateSlice(k, v); }); |
После того, как мы проделали все шаги, нам необходимо все это оживить. Мы создали функцию, которая включает анимацию, также проверяет направление в котором двигаются элементы, а затем изменить позицию полос. Эта функция запускается после того, как анимация закончена.
Тогда нам нужно проверить работает ли анимация, затем удалить некоторые классы и анимировать каждый кусочек. Мы используем генератор случайных чисел для генерации времени для каждого среза.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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); |
Затем мы проверяем, в каком направлении движется и запускается анимация. Анимация имеет следующий вид.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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)); }); |
Также мы будем использовать меню, которое при активации пункта будет запускать анимацию.
1 2 3 4 5 6 7 8 9 |
$('#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'])); } |
Такой вариант организации фона отлично подойдет для портфолио или сайта-визитки. Скользящие фоновые панели несомненно заинтригуют посетителя сайта оригинальностью, а вам это только на руку.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 28.11.2012 в 19:16, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |