В данном уроке мы сделаем полноэкранное слайдшоу фоновых изображений с использованием только 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 }
}
Другие примеры можно посмотреть в демонстрации.