ZorNet.Ru — сайт для вебмастера » HTML и CSS » Циклические слайд-шоу изображений на CSS3

Циклические слайд-шоу изображений на CSS3

В материале рассмотрим как создать HTML-разметку для циклического слайд-шоу, которое идет на чистом CSS, где автоматически меняются изображение. Теперь у нас появилась возможность не применять JavaScript, а все благодаря CSS3 создавать эффекты анимации, виде смены картинок. Это сто то ближе к слайдеру, но здесь идет чистый фон, который по заданному времени меняется на следующий. Благодаря свойству перехода, появляется возможность задействовать изменение, которое идет от одного состояния к следующему.

Для задействования производить циклическое слайд-шоу, нам необходимо иметь базовые знание CSS, это качается функций-переходов и анимации, которые расположены по заданным кадрам. На современном сайте, что представляет некую группу или официальный продукт. То здесь можно настроит циклический переход, виде баннера, который возможно будет располагаться в шапке, ведь там всегда место найдется. Тем самым мы изначально представляет продукт или направление сайта, что при открытии можно наблюдать по данным снимкам.

Здесь в стилистике не прописана адаптивность, так как все картинки фона выставлены на ширину 100% - что автоматически будут корректно находится в заданном блоке или на сменном фоне на сайте.

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

Использование CSS-анимации в циклическом слайд-шоу

Создать изображений циклическими через слайд-шоу

Установка:

По месту, где хотите наблюдать переходы снимков.

HTML

Код

CSS

Код

* {
  padding: 0;
  margin: 0
}

h1 { position:absolute; top:50px; width:100%; text-align:center; color:#fff; z-index:999;}

.css-script-ads { position:absolute; top:250px; width:100%; text-align:center; z-index:999;}

body { background-color: #000000; }

.moving-slider > figure {
  animation: imageAnimation 30s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}

.moving-slider > figure:nth-child(1) { background-image: url('Ссылка на изображение #1'); }

.moving-slider > figure:nth-child(2) {
  animation-delay: 6s;
  background-image: url('Ссылка на изображение #2');
}

.moving-slider > figure:nth-child(3) {
  animation-delay: 12s;
  background-image: url('Ссылка на изображение #3');
}

.moving-slider > figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('Ссылка на изображение #4');
}

.moving-slider > figure:nth-child(5) {
  animation-delay: 24s;
  background-image: url('Ссылка на изображение #5');
}
  @keyframes
imageAnimation { 0% {
  animation-timing-function: ease-in;
  opacity: 0;
}
  8% {
  animation-timing-function: ease-out;
  opacity: 1;
}
  17% {
  opacity: 1
}
  25% {
  opacity: 0
}
  100% {
  opacity: 0
}
}

Где применить, то здесь сами догадаетесь, как уже в описание сказано, что действие подойдет под фон, а также под заданный по размеру блок, где будет происходить цикл по смене изображений.

Демонстрация

Простое слайд-шоу при помощи CSS-анимации

Смена изображений через паузу на чистом CSS

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

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

Установочный процесс:

HTML

Код

CSS

Код

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
li {
  position: absolute;
  left: 50%;
  margin-left: -247px;
  margin-top: 3%;
}
img {
  border: 2px solid #969292;
  border-radius: 3px;
  box-shadow: 0 0 5px 0 hsl(0deg 5% 14% / 70%);
}
li:nth-child(4) {
  animation: xfade 16s 0s infinite;
}
li:nth-child(3) {
  animation: xfade 16s 4s infinite;
}
li:nth-child(2) {
  animation: xfade 16s 8s infinite;
}
li:nth-child(1) {
  animation: xfade 16s 12s infinite;
}
@keyframes xfade{
  17% {
  opacity:1;
  }
  25% {
  opacity:0;
  }
  92% {
  opacity:0;
  }
}

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

Демонстрация

01 Мая 2021 Загрузок: 2 Просмотров: 1491 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0