• 2825
  • 0
  • Автор: http://tympanus.net/
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

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

Скачиваем исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
HTML
Используем неупорядоченный список для слайд-шоу:

Код:
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
<h3>релаксация</h3>
</div>
</li>
<li>
<span>Image 02</span>
<div>
<h3>покой</h3>
</div>
</li>
<li>
<span>Image 03</span>
<div>
<h3>баланс</h3>
</div>
</li>
<li>
<span>Image 04</span>
<div>
<h3>невозмутимость</h3>
</div>
</li>
<li>
<span>Image 05</span>
<div>
<h3>хладнокровие</h3>
</div>
</li>
<li>
<span>Image 06</span>
<div>
<h3>безмятежность</h3>
</div>
</li>
</ul>

CSS
Создадим стиль для неупорядоченного списка в первую очередь.
Мы будем также использовать: после псевдо-элемент для того, чтобы разместить рисунок на верхней части изображения:
Код:
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
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: 0;
left: 0;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
}

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

Код:
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0;
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%. Мы хотим показать изображение полностью, поэтому с 8% до 17% изображение будет не прозрачным и только
после этого оно начнёт исчезать, чтобы плавно появилось следующее изображение.

Код:
@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 }
}

Тоже самое мы делаем для заголовков, но их изчезновение начинаем с 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 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 }
}
Название будет скользить в с правой и исчезают уходя влево :

Код:
@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 }
}

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

Можешь почитать и вот эту статейку "Временные уведомления для вашего сайта"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

TWIG -что это?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element