—»     —»   Слайд-шоу с полноэкранным фоном на CSS3
  Раздел: Руководства, CSS/Style Sheets   Комментариев: 2  

Слайд-шоу с полноэкранным фоном на CSS3

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

Изображения были любезно представлены Марком Себастьяном (Mark Sebastian), и распространяются они под лицензионным соглашением Creative Commons Attribution-ShareAlike 2.0 Generic.

Слайд-шоу с полноэкранным фоном на CSS3

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

Верстка

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

<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
<h3>re·lax·a·tion</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;
}

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

Span, содержащий изображение из слайд-шоу, будет иметь абсолютное позиционирование, а его параметры ширины и высоты будут выставлены на 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;
}

Анимация для каждого 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;
}

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

Теперь мы определим фоновые изображения для всех 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 секунд. За эти 36 секунд мы изменим уровень плотности с 0 на 1 (это произойдет примерно на 8% прогресса анимации). А затем такое значение уровня плотности продержится вплоть до 17% прогресса. По достижении 25% прогресса, уровень плотности снова должен спуститься к 0, и оставаться таким до самого конца.

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

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

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

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

Теперь давайте также позаботимся о размере шрифта для заголовков для тех случаев, когда размер окна просмотра будет меньше. Мы используем media queries для того, чтобы сделать шрифт меньше при определенной ширине:

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

Заголовок будет выезжать с правой стороны (нам нужно будет изменить значение параметра text-align у заголовка на 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 }
}

Не забывайте, что вариантов может быть множество, главное не бояться экспериментировать!

Демо

Здесь можно видеть несколько вариантов применения анимации:

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

На данный момент анимации лучше всего воспроизводятся в браузерах семейства Webkit типа Chrome и Safari.

Надеемся, что вам понравилось сегодняшнее руководство, и вы найдете ему применение в своих дальнейших проектах!

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, слайд-шоу, фотография
Опубликовал Design FactoRy   Прочитано (раз): 11225   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 21 февраля 2012 @ 11:00
Написал: yelle9 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
smile Спасибо
Комментарий #2: 15 декабря 2014 @ 22:32
Написал: Инна — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А как можно это поставить на Joomla?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2020    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031