Слайдер с меняющимися фото на CSS

Слайдер выполнен без применения скриптов с использованием СSS-свойства animation

Пример:

Национальный Парк Йеллоустоун

Йеллоустоун — национальный парк и заповедник на северо-западе США. Он расположен на территории сразу трех штатов: Вайоминг (самая большая часть), Айдахо и Монтана.

Мальдивские Острова

Мальдивские острова – это огромный архипелаг островов вулканического происхождения и окружающих их коралловых рифов и лагун в Лаккадивском море.

Горы Шотландии

Шотландия — самая горная страна из составляющих Великобританию. Наиболее высокие горы находятся в западной части Грампианских горах.

Озеро Ирен

HTML:

CSS:

Немного о коде

На показ каждого слайдера выделяется 10 секунд, а всего их 4. Поэтому общая продолжительность анимации составляет 40 секунд. Это указывается в строках animation: slideanim 40s infinite и animation: zoom 40s infinite

Для каждого слайда отдельно устанавливается задержка, это классы .slideshow-item:nth-child(1), .slideshow-item:nth-child(1) img и т.д.

Значения в анимации slideanim устанавливаются так:

  • 12.5% {opacity: 1} - 100 / 4 (кол-во слайдов) / 2, при котором переходим с полной прозрачности в видимую область
  • 25% {opacity: 1} - 100 / 4 (кол-во слайдов), при котором показываем непрозрачный слайд
  • 37.5% {opacity: 0} - складываем первые два значения для перехода опять в прозрачность

Значения в анимации zoom устанавливаются так:

  • 50% {transform: scale(1.3)} - 100 / 4 (кол-во слайдов) x 2, при котором увеличиваем фотографию

Например, для 7-ми слайдов эти анимации будут выглядеть так:

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!