Полноэкранное Фоновое Слайд-шоу с CSS3

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

Изображения Марк Себастьян , и они под лицензией Creative Commons Attribution-ShareAlike 2.0 Generic. Обратите внимание, что это будет работать только в браузерах, поддерживающих CSS анимации .

Разметка

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

<ul class="cb-slideshow">
            <li><span>Image 01</span><div><h3>re·lax·a·tion</h3></div></li>
            <li><span>Image 02</span><div><h3>qui·e·tude</h3></div></li>
            <li><span>Image 03</span><div><h3>bal·ance</h3></div></li>
            <li><span>Image 04</span><div><h3>e·qua·nim·i·ty</h3></div></li>
            <li><span>Image 05</span><div><h3>com·po·sure</h3></div></li>
            <li><span>Image 06</span><div><h3>se·ren·i·ty</h3></div></li>
        </ul>

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, градиент с некоторой прозрачностью.

Span , который будет включать слайд-шоу будет позиционироваться абсолютно и иметь ширину и высоту 100%. Поскольку у нас есть какой-то текст внутри, мы сделаем цвет прозрачным, поскольку мы не хотим, чтобы его было видно. Размер фона выставляем “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%. При достижении 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 }
}

Название будет скользить справа (мы должны изменить текст на “right”), и исчезать, сдвинув ее влево при выведении:

@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.

Я надеюсь, вам понравился этот урок, и он будет для вас полезным и вдохновляющим!

• Демо 1: Простой Fade, плавно исчезает
• Демо 2: Изображение плавно увеличивается, название движется вверх и исчезает

Оригинал / Перевод