Полноэкранное слайдшоу на CSS3

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

Разметка HTML

Для слайдшоу используется неупорядоченный список. Для каждого изображения добавляется элемент span и для заголовка используется элемент div:

<ul class="cb-slideshow">

    <li>

                               <span>Изображаение 01</span>

                               <div>

                                               <h3>РЕ•ЛАК•СА•ЦИЯ</h3>

                               </div>

                </li>

    <li> . . . </li>

    <li> . . . </li>

</ul>

Элемент span будет иметь фоновое изображение, которое демонстрируется в слайдшоу.

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;

}

В демонстрации для маски используется повторяющийся точечный шаблон.

Элемент 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;

}

Анимация для каждого элемента span будет длиться 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;

}

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

Теперь определим фоновые изображения для всех элементов span и задержки анимации так, чтобы каждое следующее изображение и заголовок проявлялось через 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;

}

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

Откуда взялись все эти значения? Нам нужно, чтобы каждое изображение было видимым в течении 6 секунд, а в конце цикла должно снова появляться первое изображение. У нас есть 6 изображений и нужно 36 секунд на весь цикл. Теперь нужно определить "время” для нужных значений непрозрачности. Так как второе изображение  будет запускать анимацию через 6 секунд, нужно вычислить процент длительности для гашения первой картинки. Делим 6 на 36 и получаем 0.166… что соответствует 17% шага анимации. Теперь определим промежуточные шаги, чтобы улучшить процесс проявления изображения. На 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 }

}

Другие примеры можно посмотреть в демонстрации.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
Перевел: Сергей Фастунов