3854
- 0
Сегодня мы создадим слайд-шоу фонового изображения на весь экран с помощью 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
}
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 }
}С помощью небольших экспериментов Вы самостоятельно можете изменить анимацию и эффекты слайд-шоу. Удачных вам экспериментов.
Можешь почитать и вот эту статейку "Приветствуем посетителя по времени суток на JS"
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.