Хочу вам представить небольшую статью о том как сделать на сайте плавную смену фона с использованием скрипта jQuery. Материал не сложный но довольно полезный. Часто при создании сайтов, можно использовать эффект плавной смены для общего фона сайта или для отдельного блока. Такой эффект украсит ваш сайт и придаст ему динамичности. Когда-то я публиковал статью с схожим материалом - Слайдер фонового изображения или меняющийся фон сайта с помощью CSS. В том примере все делалось с помощью CSS, тут мы подключим еще и jQuery. Данный способ более универсален в том плане, что его можно подогнать под любое количество слайдов, не заморачиваясь с расчетами. Если такой вариант вам нравится, то приступим к теории, но сначала на практике посмотрите как это будет выглядеть:
HTML разметка
Чтобы получить подобный результат для начала нужно определится с областью, которой мы будем менять фон. У нас это будет фон всей страницы, если хотите ограничится фоном блока, то будущие стили CSS, нужно будет переделать, в этом вам помогут элементарные знания CSS. Итак, у нас общий фон страницы, поэтому в самом начале кода этой страницы, нужно разместить HTML разметку. Если вы хотите для всего сайта, то код надо разместить в шапке сайта после тега <body>. Смотрите как это сделано в примере, в скачанном файле index.html. Добавлять нужно вот такую разметку:
С кодом все просто - имеется общий контейнер с классом bg-wrapper, внутри которого расположены блоки с общим классом bg-grad и отдельно у каждого свой класс - one, two, three, four, five, six. То бишь у нас будет шесть слайдов. Если хотите больше или меньше, то соответственно, добавьте или удалите лишние. Так же у первого блока есть третий класс - active. Это тот блок с фоном. с которого начнется отсчет, он будет первым.
CSS стили
Далее, чтобы задать те самые фоны и обозначить правильный внешний вид, добавляем разметку CSS. Будущие стили будут иметь следующий вид:
Нашему общему блоку, задаем фиксированное позиционирование и уровень слоя -1. Чтобы сместить позади всего контента.
Если у вас в стилях для body задан фон, лучше удалите его. Возможно, вы не увидите плавной смены, потому как она не будет видна из за стилей body. Если вы делаете смену фона для какого-то блока, то там уже не нужно смотреть на body, ориентируйтесь на текущие слои.
Так же, родительскому блоку задана прозрачность и ее время заполнения. Это строки - -webkit-transition: opacity 5s linear; и transition: opacity 5s linear. Именно 5s - это и есть 5 секунд плавного появления прозрачности блоков. Это время важно, запомните его. Если захотите сменить, то его нужно менять вместе с временем в скрипте, что меняет слайды.
Задаются стили и для каждого слайда. В данном примере мы задаем фон - градиент. Можете задать просто цвет или картинку. Если захотите картинку, то в концек статьи будет пример и код как это сделать, но об этом позже. Пока только цвет.
jQuery - скрипт
После того как определились с разметкой и стилями к ней, пора подключить сам скрипт, который и будет менять наш фон сайта. Так как это jQuery, то нужно подключить библиотеку. Вы должны знать подключалась ли ранее библиотека jQuery к вашему сайту. Если да, то пропускайте этот шаг, если нет, то добавьте ее.
Только после нее нужно добавлять скрипт. Если вы не знаете как и куда добавлять библиотеку и скрипт, ознакомьтесь со статьей - Как и где подключить скрипт?.
Добавить нужно вот такой небольшой скрипт:
<script type="text/javascript">
$(function(){
var transTime = 5000;
var numBgColors = $('.bg-grad').length;
var bgtrans = setInterval(function(){
if($('.bg-grad.active').index() == ($('.bg-grad').length-1)){
$('.bg-grad.active').removeClass('active');
$('.bg-grad').eq(0).addClass('active');
}else{
var curIndex = $('.bg-grad.active').index();
$('.bg-grad.active').removeClass('active');
$('.bg-grad').eq(curIndex+1).addClass('active');
}
},transTime);
});
</script>
Особо разбирать этот код смысла нет, кто знаком с jQuery, все понял сразу. Стоит обратить внимание лишь на время анимации - 3 строка, в которой оно задано в миллисекундах и равно 5000. Думаю, вы заметили что это 5 секунд и они равны тем пяти секундам из стилей. Это важно. Если захотите менять значение, то меняйте сразу и там. Значения должны совпадать, чтобы не было рывков и глюков в анимации.
Добавив и настроив все это, вы получите результат как в примере. Если же, хотите получить с картинками, то как и обещал покажу пример, как это сделать.
Смена картинок, вместо сплошного цвета
Все остается так же как и в первом примере, единственное, что я подправлю - блоков всего три, вместо 6. Это потому, что я использую те же картинки что и в статье с CSS слайдером, а их всего три. Но это не имеет значения. так как я писал, что блоков может быть сколько угодно. Главное отличие будет в стилях CSS. Выглядеть они будут так:
Родительский блок имеет те же стили, но ему мы добавляем псевдоэлемент - after. Он нужен для того чтобы, задать текстуру поверх фона. В примере видно что фон, как бы, весь в точку. Это не картинка в точку, это наложенный поверх нее слой. Для этого используется изображение pattern.png. Его можете скачать по ссылке выше.
Далее, каждому блоку присваиваем нужную картинку, указывая правильный путь к ней. Так же, задан параметр cover, для того, чтобы растянуть картинку на всю область страницы. Если ваша картинка какой-то бесшовный фон, то задайте другие параметры для фона.
