HTML разметка
Чтобы получить подобный результат для начала нужно определится с областью, которой мы будем менять фон. У нас это будет фон всей страницы, если хотите ограничится фоном блока, то будущие стили CSS, нужно будет переделать, в этом вам помогут элементарные знания CSS. Итак, у нас общий фон страницы, поэтому в самом начале кода этой страницы, нужно разместить HTML разметку. Если вы хотите для всего сайта, то код надо разместить в шапке сайта после тега <body>. Смотрите как это сделано в примере, в скачанном файле index.html. Добавлять нужно вот такую разметку:
<div class="bg-wrapper"> <div class="bg-grad one active"></div> <div class="bg-grad two"></div> <div class="bg-grad three"></div> <div class="bg-grad four"></div> <div class="bg-grad five"></div> <div class="bg-grad six"></div> </div>
С кодом все просто - имеется общий контейнер с классом bg-wrapper, внутри которого расположены блоки с общим классом bg-grad и отдельно у каждого свой класс - one, two, three, four, five, six. То бишь у нас будет шесть слайдов. Если хотите больше или меньше, то соответственно, добавьте или удалите лишние. Так же у первого блока есть третий класс - active. Это тот блок с фоном. с которого начнется отсчет, он будет первым.
CSS стили
Далее, чтобы задать те самые фоны и обозначить правильный внешний вид, добавляем разметку CSS. Будущие стили будут иметь следующий вид:
.bg-grad{
position: fixed;
z-index:-1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 5s linear;
transition: opacity 5s linear;
background: #f17009;
}
.bg-grad.active{
opacity: 1;
}
.bg-grad.one{
background: #f17009;
background: -webkit-linear-gradient(30deg, #f17009 0%, #ee620d 24%, #f19109 74%, #f17009 100%);
background: linear-gradient(60deg, #f17009 0%, #ee620d 24%, #f19109 74%, #f17009 100%);
}
.bg-grad.two{
background: #f1093f;
background: -webkit-linear-gradient(30deg, #f1093f 0%, #ee0d2d 24%, #f10960 74%, #f1093f 100%);
background: linear-gradient(60deg, #f1093f 0%, #ee0d2d 24%, #f10960 74%, #f1093f 100%);
}
.bg-grad.three{
background: #a709f1;
background: -webkit-linear-gradient(30deg, #a709f1 0%, #8c09f1 24%, #d309f1 74%, #a709f1 100%);
background: linear-gradient(60deg, #a709f1 0%, #8c09f1 24%, #d309f1 74%, #a709f1 100%);
}
.bg-grad.four{
background: #097bf1;
background: -webkit-linear-gradient(30deg, #097bf1 0%, #0971f1 24%, #09a2f1 74%, #097bf1 100%);
background: linear-gradient(60deg, #097bf1 0%, #0971f1 24%, #09a2f1 74%, #097bf1 100%);
}
.bg-grad.five{
background: #1eb65e;
background: -webkit-linear-gradient(30deg, #1eb65e 0%, #19a83e 24%, #1bcd66 74%, #1eb65e 100%);
background: linear-gradient(60deg, #1eb65e 0%, #19a83e 24%, #1bcd66 74%, #1eb65e 100%);
}
.bg-grad.six{
background: #ffc000;
background: -webkit-linear-gradient(30deg, #ffc000 0%, #ffa200 24%, #ffde00 74%, #ffc000 100%);
background: linear-gradient(60deg, #ffc000 0%, #ffa200 24%, #ffde00 74%, #ffc000 100%);
}
Нашему общему блоку, задаем фиксированное позиционирование и уровень слоя -1. Чтобы сместить позади всего контента.
Если у вас в стилях для body задан фон, лучше удалите его. Возможно, вы не увидите плавной смены, потому как она не будет видна из за стилей body. Если вы делаете смену фона для какого-то блока, то там уже не нужно смотреть на body, ориентируйтесь на текущие слои.
Так же, родительскому блоку задана прозрачность и ее время заполнения. Это строки - -webkit-transition: opacity 5s linear; и transition: opacity 5s linear. Именно 5s - это и есть 5 секунд плавного появления прозрачности блоков. Это время важно, запомните его. Если захотите сменить, то его нужно менять вместе с временем в скрипте, что меняет слайды.
Задаются стили и для каждого слайда. В данном примере мы задаем фон - градиент. Можете задать просто цвет или картинку. Если захотите картинку, то в концек статьи будет пример и код как это сделать, но об этом позже. Пока только цвет.
jQuery - скрипт
После того как определились с разметкой и стилями к ней, пора подключить сам скрипт, который и будет менять наш фон сайта. Так как это jQuery, то нужно подключить библиотеку. Вы должны знать подключалась ли ранее библиотека jQuery к вашему сайту. Если да, то пропускайте этот шаг, если нет, то добавьте ее.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Только после нее нужно добавлять скрипт. Если вы не знаете как и куда добавлять библиотеку и скрипт, ознакомьтесь со статьей - Как и где подключить скрипт?.
Добавить нужно вот такой небольшой скрипт:
<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. Выглядеть они будут так:
.bg-grad{
position: fixed;
z-index:-1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 5s linear;
transition: opacity 5s linear;
}
.bg-grad:after{
position: fixed;
width:100%;
height:100%;
top:0px;
left:0px;
content: '';
background: transparent url(images/pattern.png) repeat top left;}
.bg-grad.active{
opacity: 1;
}
.bg-grad.one{
background: url(images/1.jpg) no-repeat;
background-size:cover;
-webkit-background-size:cover;
}
.bg-grad.two{
background: url(images/2.jpg) no-repeat;
background-size:cover;
-webkit-background-size:cover;
}
.bg-grad.three{
background: url(images/3.jpg) no-repeat;
background-size:cover;
-webkit-background-size:cover;}
Родительский блок имеет те же стили, но ему мы добавляем псевдоэлемент - after. Он нужен для того чтобы, задать текстуру поверх фона. В примере видно что фон, как бы, весь в точку. Это не картинка в точку, это наложенный поверх нее слой. Для этого используется изображение pattern.png. Его можете скачать по ссылке выше.
Далее, каждому блоку присваиваем нужную картинку, указывая правильный путь к ней. Так же, задан параметр cover, для того, чтобы растянуть картинку на всю область страницы. Если ваша картинка какой-то бесшовный фон, то задайте другие параметры для фона.
На этом все, спасибо за внимание. 🙂
