Слайд шоу для фоновых изображений на CSS

Создание сайта с эффектом слайдшоу для фоновых изображений может значительно улучшить визуальное восприятие и привлечь внимание пользователей.

Давайте сделаем вот такое слайдшоу для фоновых изображений:

Заголовок

Подзаголовок

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Шаг 1. HTML код

<div class="slideshow">
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
</div>
<div class="content">
    <!-- Здесь размещаем основной контент сайта -->
</div>

Шаг 2. CSS разметка

body, .slideshow, .slide {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
 
.slideshow {
  position: relative;
  z-index: -1;
}
 
.slide {
  position: absolute;
  background-size: cover;
  background-position: center;
  animation: slideShow 12s infinite;
  opacity: 0;
}
 
.slide:nth-child(1) {
  background-image: url('image1.jpg');
  animation-delay: 0s;
}
 
.slide:nth-child(2) {
  background-image: url('image2.jpg');
  animation-delay: 4s;
}
 
.slide:nth-child(3) {
  background-image: url('image3.jpg');
  animation-delay: 8s;
}
 
@keyframes slideShow {
  0% {opacity: 0}
  8% {opacity: 1}
  25% {opacity: 1}
  33% {opacity: 0}
  100% {opacity: 0}
}
 
.content {
  position: absolute;
  z-index: 1;
  /* Здесь добавляем стили для основного контента сайта */
}

Шаг 3. Наслаждаемся результатом

В результате мы получим сайт с эффектом слайд-шоу для фоновых изображений.
Можно настроить параметры анимации, изменить время показа каждого слайда в animation и задержку между ними в animation-delay.

Остались вопросы? Или хотите получить что-то необычное?
Пишите нам на Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в браузере должен быть включен Javascript. и мы вам обязательно поможем.

WEB дизайн

Лайфхаки для разработчиков

Слайд шоу для фоновых изображений на CSS