В прошлой статье (ссылка на статью) мы изучили, как сделать на собственном сайте, слайдер, в котором меняются изображения. Но, это был лишь базовый элемент, который присутствует почти на каждом втором сайте в интернете. Если же поискать среди просторов мироздания сети, можно наткнуться на множество различных библиотек, которые достаточно просто встраиваются на сайт, по смене слайдера. Но, нет ни чего лучше, чем самописный сайт, не зависящий ни от чего.
В этой статье, я бы хотел рассказать, как улучшить слайдер, находящийся в верхней части сайта, а именно – сделать плавным переход между пула изображений.
Вероятнее всего, для вас сейчас прозвучала несколько незнакомых слов, с которыми вы ни разу не сталкивались, а если и сталкивались, то не так часто. Расскажу подробнее. Header – он же верхушка сайта, та самая часть, которая должна в первую очередь захватить внимание пользователя, который зашёл на ваш сайт. Слайдер – эта та самая картинка, которая привлекает внимание. Слайдер может состоять из нескольких картинок, поочерёдно меняющихся.
Рисунок 1: Слайдер на сайте
Перед прочтением этой статья, я бы настоятельно порекомендовал вам ознакомиться с некоторыми из статей на нашем сайте, в которых достаточно подробно описано создание самых простых элементов на сайте.
Как сделать плавный переход в слайдере сайта?
Что же, как и говорил, я использую прошлый код слайдера, и немного изменю его.
Код страницы:
<html>
<head>
<style>
.header {
background-image: URL("img/image-background/1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 1920px;
height: 700px;
}
.background-image {
background-repeat: no-repeat;
background-image: URL("img/image-background/2.jpg");
background-size: 100% 100%;
background-position: -1920px 0px;
width: 100%;
height: 100%;
}
.header .content {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="header">
<div class = "background-image">
<div class="content">
</div>
</div>
</div>
<script>
var imageBackground = document.getElementsByClassName('header')[0]; // получаем объект (первый контейнер)
var imageBackground_2 = document.getElementsByClassName('background-image')[0]; // получаем объект (второй контейнер)
var indexBackgroundImage = 1; // указываем индекс изображение (по началу 1)
var timeSwap = 5; // указываем время для отображения одной картинки
var DeltaX = 0; // задаём координату движения (по стандарту )
setTimeout(StartChangeHaderImage, timeSwap*1000); // запускаем функцию старта смены изображения через заданное время
function StartChangeHaderImage() { // функция старта смены изображения
imageBackground.style.backgroundPosition = "0px 0px"; // присваеваем нуливые координаты для первой картинки
imageBackground_2.style.backgroundPosition = "-1920px 0px"; // присваеваем координаты для второй кортинки, так, чтобы она была смещена
imageBackground.style.backgroundImage = 'URL("img/image-background/' + indexBackgroundImage + '.jpg")'; // задаем изображение для первой картинки в зависимости от индеса изображения
if(indexBackgroundImage == 3) indexBackgroundImage = 1; // если индекс дастиг максимального количества картинок (в моём случае 3), обнуляем
else indexBackgroundImage++; // если нет, показываем следующее изображение
imageBackground_2.style.backgroundImage = 'URL("img/image-background/' + (indexBackgroundImage) + '.jpg")'; // задаём следующее изображение для второго объекта
DeltaX = 0; // обнуляем координату движения
ChangeHaderImage(); // запускаем функцию смены картинки
}
function ChangeHaderImage() { // функция смены картинки
if(DeltaX < 1920) { // если кооржината движения меньше чем ширина самой картинки (тобиш 1920)
DeltaX += 20; // двигаем картинку на 20 пикселей
setTimeout(ChangeHaderImage, 10); // перезапускаем функцию через 10 милисекунд
imageBackground.style.backgroundPosition = DeltaX + "px 0px"; // сдвигаем первое изображение на координату движения
imageBackground_2.style.backgroundPosition = (-1920 + DeltaX) + "px 0px"; // сдвигаем второе изображение на координату движения
} else { // если изображение сдвинулось максимум
setTimeout(StartChangeHaderImage, timeSwap*1000); // запускаем функцию старта смены изображение через время отображения картинки
}
}
</script>
</body>
</html>
В первую очередь нам необходимо изменить стили одного из контейнеров, а именно background-image. Меняем значение свойство background-position: 0px 0px; Так, мы накладываем одну из картинок, поверх второй.
Следующими нововведениями, является изменение скрипта, меняющего изображения.
var imageBackground = document.getElementsByClassName('header')[0]; // получаем объект (первый контейнер)
var imageBackground_2 = document.getElementsByClassName('background-image')[0]; // получаем объект (второй контейнер)
imageBackground_2.style.opacity = "0"; // задаём прозрачность второму изображению
var indexBackgroundImage = 1; // указываем индекс изображение (по началу 1)
var timeSwap = 5; // указываем время для отображения одной картинки
var DeltaX = 0; // задаём дельту прозрачности (по стандарту)
setTimeout(StartChangeHaderImage, timeSwap*1000); // запускаем функцию старта смены изображения через заданное время
function StartChangeHaderImage() { // функция старта смены изображения
imageBackground_2.style.opacity = "0"; // задаём прозрачность второму изображению
imageBackground_2.style.backgroundImage = 'URL("img/image-background/' + indexBackgroundImage + '.jpg")'; // задаем изображение для второй картинки в зависимости от индеса изображения
if(indexBackgroundImage == 3) indexBackgroundImage = 1; // если индекс дастиг максимального количества картинок (в моём случае 3), обнуляем
else indexBackgroundImage++; // если нет, показываем следующее изображение
imageBackground.style.backgroundImage = 'URL("img/image-background/' + (indexBackgroundImage) + '.jpg")'; // задаём следующее изображение для первого объекта
imageBackground.style.opacity = "1"; // задаём прозрачность первому изображению
DeltaX = 0; // обнуляем прозрачность изображения
ChangeHaderImage(); // запускаем функцию смены картинки
}
function ChangeHaderImage() { // функция смены картинки
if(DeltaX <= 1) { // если прозначность картинки меньше чем 1
DeltaX += 0.05; // увеличиваем прозрачность
setTimeout(ChangeHaderImage, 10); // перезапускаем функцию через 10 милисекунд
imageBackground_2.style.opacity = (1 - DeltaX); // задаём прозрачность второму изображению
} else { // если изображение сдвинулось максимум
imageBackground_2.style.opacity = 0; // задаём прозрачность второму изображению
setTimeout(StartChangeHaderImage, timeSwap*1000); // запускаем функцию старта смены изображение через время отображения картинки
}
}
Суть этого скрипта заключается в том, что он меняет изображения из определённого пула, и обнуляет свойство прозрачности у изображений, что позволяет сделать плавную смену изображений.
Важно! Чтобы у изображений было прописано правильно название. А именно, последующим образом:
Рисунок 2: Название изображений
Рисунок 3: Результат слайдера
Полный код:
<html>
<head>
<style>
.header {
background-image: URL("img/image-background/1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 1920px;
height: 700px;
}
.background-image {
background-repeat: no-repeat;
background-image: URL("img/image-background/2.jpg");
background-size: 100% 100%;
background-position: 0px 0px;
width: 100%;
height: 100%;
}
.header .content {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="header">
<div class = "background-image">
<div class="content">
</div>
</div>
</div>
<script>
var imageBackground = document.getElementsByClassName('header')[0]; // получаем объект (первый контейнер)
var imageBackground_2 = document.getElementsByClassName('background-image')[0]; // получаем объект (второй контейнер)
imageBackground_2.style.opacity = "0"; // задаём прозрачность второму изображению
var indexBackgroundImage = 1; // указываем индекс изображение (по началу 1)
var timeSwap = 5; // указываем время для отображения одной картинки
var DeltaX = 0; // задаём дельту прозрачности (по стандарту)
setTimeout(StartChangeHaderImage, timeSwap*1000); // запускаем функцию старта смены изображения через заданное время
function StartChangeHaderImage() { // функция старта смены изображения
imageBackground_2.style.opacity = "0"; // задаём прозрачность второму изображению
imageBackground_2.style.backgroundImage = 'URL("img/image-background/' + indexBackgroundImage + '.jpg")'; // задаем изображение для второй картинки в зависимости от индекса изображения
if(indexBackgroundImage == 3) indexBackgroundImage = 1; // если индекс достиг максимального количества картинок (в моём случае 3), обнуляем
else indexBackgroundImage++; // если нет, показываем следующее изображение
imageBackground.style.backgroundImage = 'URL("img/image-background/' + (indexBackgroundImage) + '.jpg")'; // задаём следующее изображение для первого объекта
imageBackground.style.opacity = "1"; // задаём прозрачность первому изображению
DeltaX = 0; // обнуляем прозрачность изображения
ChangeHaderImage(); // запускаем функцию смены картинки
}
function ChangeHaderImage() { // функция смены картинки
if(DeltaX <= 1) { // если прозрачность картинки меньше чем 1
DeltaX += 0.05; // увеличиваем прозрачность
setTimeout(ChangeHaderImage, 10); // перезапускаем функцию через 10 миллисекунд
imageBackground_2.style.opacity = (1 - DeltaX); // задаём прозрачность второму изображению
} else { // если изображение сдвинулось максимум
imageBackground_2.style.opacity = 0; // задаём прозрачность второму изображению
setTimeout(StartChangeHaderImage, timeSwap*1000); // запускаем функцию старта смены изображение через время отображения картинки
}
}
</script>
</body>
</html>