Хаки и Скрипты Next Generation CMS : CSS : Фоновое слайд-шоу на CSS3

irbees2008 Опубликовано - 1 - августа CSS

Автор: 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 }
}

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

Можешь почитать и вот эту статейку "Копируем в Mysql"

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

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