Полноэкранное фоновое слайд-шоу только на CSS3

Примеры Скачать .zip

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

Обратите внимание, что наша страничка будет работать только в тех браузерах, где поддерживается CSS анимация, а именно

IE: 10.0;

Firefox: 16.0, 5.0 -moz-;

Chrome: 43.0, 4.0 -webkit-;

Safari: 4.0 -webkit-;

Opera: 12.1, 12.0 -o-;

iOS Safari: 9, 7.1 -webkit-;

Opera Mini: —;

Android Browser: 44, 4.1 -webkit-;

Chrome for Android: 44;

Эта заметка является результатом недавних экспериментов с CSS3 при подготовке титульной страницы очередного сайта. Если хотите узнать больше, то обращайтесь сюда:

Разметка

Для слайд-шоу используем неупорядоченный список < ul >. Используем тег < li >, где разместим изображение и заголовок к нему:


	
		Image 01
		
			никологоры·
Церковь·Спаса·преображенья

Фоновые изображения будут показаны в режиме слайд-шоу.

CSS

В первую очередь добавим стиль для неупорядоченного списка. Здесь изображение растягиваем на всю область просмотра. Кроме того, используем псевдо-элемент :after для определения местоположения рисунка в верхней части экрана:

.cb-slideshow,
.cb-slideshow:after { 
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 0; 
}
.cb-slideshow:after { 
	content: '';
	background: transparent url(../images/pattern.png) repeat top left; 
}

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

Изображение слайд-шоу будем позиционировать абсолютно со 100% шириной и высотой. Так как на изображение накладывается текст, то фоновый цвет сделаем прозрачным. Значение свойства background-size установим в значение cover, что бы фоновое изображение покрывало всю область просмотра и, следовательно, занимало весь экран. Непрозрачность устанавливается равной 0. При анимации мы будем изменять это значение:

.cb-slideshow li span { 
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	color: transparent;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: none;
	opacity: 0;
	z-index: 0;
	animation: imageAnimation 36s linear infinite 0s; 
}

Сеанс анимации будет продолжаться 36 секунд и запускаться бесконечно. Но давайте рассмотрим детали и, прежде всего, разделим стили для изображения и заголовка:

.cb-slideshow li div { 
	z-index: 1000;
	position: absolute;
	bottom: 30px;
	left: 0px;
	width: 100%;
	text-align: center;
	opacity: 0;
	color: #fff;
	animation: titleAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div h3 { 
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 240px;
	padding: 0;
	line-height: 200px; 
}

Анимации для названия раздела также будет продолжаться 36 секунд.

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

.cb-slideshow li:nth-child(1) span { 
	background-image: url(../images/1.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
	background-image: url(../images/2.jpg);
	animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
	background-image: url(../images/3.jpg);
	animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
	background-image: url(../images/4.jpg);
	animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
	background-image: url(../images/5.jpg);
	animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
	background-image: url(../images/6.jpg);
	animation-delay: 30s; 
}

.cb-slideshow li:nth-child(2) div { 
	animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
	animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
	animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) div { 
	animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) div { 
	animation-delay: 30s; 
}

Теперь подробно рассмотрим анимационные свойства слайд-шоу. Каждый сеанс занимает 36 секунд. За эти 36 секунд изменим непрозрачность от 0 до 1 за 8% этого времени. Далее, в течение 17% времени непрозрачность сохраняется. При достижении 25% времени непрозрачности должно быть установлена в 0 и оставаться такой до конца.

Теперь, почему именно эти значения? Мы хотим видеть каждое изображение в течение 6 секунд и знаем, что в конце цикла должно появиться первое изображение для начала следующего цикла. У нас есть 6 изображений и полный сеанс до окончания занимает 36 секунд. Нам нужно вычислить «время» соответствующего значения непрозрачности. Зная, что наше второе изображение будет показано через 6 секунд, мы должны знать процентиль анимации, который потребуется для постепенного исчезновения первого изображения. Разделив 6 на 36, получим 0,166…, которые и есть те самые 16% каждого шага ключевого кадра. Если мы не хотим, чтобы наше изображение просто исчезло в это время, то определим интервал шага и установим его в половину того, что получили, то есть 8%. Это тот самый момент, когда изображение будет показано полностью, прежде чем начнет растворятся до 17% и полностью исчезнет на уровне 25%.

@keyframes imageAnimation { 
	0% { opacity: 0; animation-timing-function: ease-in; }
	8% { opacity: 1; animation-timing-function: ease-out; }
	17% { opacity: 1 }
	25% { opacity: 0 }
	100% { opacity: 0 }
}

Подобные рассуждения верны и для анимации названия, просто, мы хотим сделать исчезновение немного быстрее, следовательно, с непрозрачность 0 до 19%:

@keyframes titleAnimation { 
	0% { opacity: 0 }
	8% { opacity: 1 }
	17% { opacity: 1 }
	19% { opacity: 0 }
	100% { opacity: 0 }
}

Для браузеров, которые не поддерживают анимацию, мы просто будем показывать последнее изображение слайд-шоу, установив его непрозрачность в 1:

.no-cssanimations.cb-slideshow li span{
	opacity: 1;
}

Класс no-cssanimations добавляется с помощью Modernizr.

Позаботимся о размере шрифта заголовка для небольших девайсов. Для этого используем медиа-запросы и подберём соответствующий размер для наименьшей ширины:

@media screen and (max-width: 1140px) { 
	.cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) { 
	.cb-slideshow li div h3 { font-size: 80px }
}

Вот и все для самой простой версии слайд-шоу! Попробуем немного оживить переходы.

Пример альтернативной анимации

С анимацией показа изображений и их названия можно немного поиграть.

В следующем варианте анимации будем немного вращать и масштабировать изображение:

@keyframes imageAnimation { 
	0% {
		opacity: 0;
		animation-timing-function: ease-in;
	}
	8% {
		opacity: 1;
		transform: scale(1.05);
		animation-timing-function: ease-out;
	}
	17% {
		opacity: 1;
		transform: scale(1.1) rotate(3deg);
	}
	25% {
		opacity: 0;
		transform: scale(1.1) rotate(3deg);
	}
	100% { opacity: 0 }
}

Здесь заголовок будет скользить справа (при этом изменим выравнивание текст по правой границе) и исчезать, сдвигаясь влево:

@keyframes titleAnimation { 
	0% {
		opacity: 0;
		transform: translateX(200px);
	}
	8% {
		opacity: 1;
		transform: translateX(0px);
	}
	17% {
		opacity: 1;
		transform: translateX(0px);
	}
	19% {
		opacity: 0;
		transform: translateX(-400px);
	}
	25% { opacity: 0 }
	100% { opacity: 0 }
}

Есть масса возможностей определения эффектов перехода между изображениями, просто надо экспериментировать!

Примеры

Здесь вы найдёте несколько примеров альтернативной анимации:

Сейчас анимация в Webkit великолепно реализована в Chrome, лучше всего в Safari.

Материалы для изчения

Animate.css — самая знаменитая библиотека css-анимаций.
Effect.css — не менее известная библиотека анимаций.
CSS3 Animation Cheat Sheet — отличная подборка примеров.
Курс CSS3 анимаций на htmlacademy — лучшее место, чтобы освоить анимации на практике. Платно, но очень дешево.
MDN CSS Animation — самый актуальный справочник по анимациям.
Обязательно поиграйте с Bounce.js. Крутейшие и супер-плавные эффекты.
Motion-ui-design — крутая коллекция ссылок по анимациям от @fliptheweb.