CSS3 слайдер с переходами и ключевыми кадрами анимации.
С анимированным “Cycle Slider” вы можете очень стильно продемонстрировать свои картины или фотографии. В интернете уже есть много разных типов слайдеров, которые анимированны частично с помощью JQuery плагинов или JavaScript. Есть много вариантов навигации и эффектов перехода на выбор. Но можно всё это сделать только с помощью CSS3 без использования JavaScript.
На этой странице будет создан слайдер выполняющий конкретные требования.
Требования
- Изображения отталкивает видимое изображение в любом направлении
- Прогресс бар будет отображаться при загрузке отдельных изображений
- Когда указатель мыши над изображением, описание отображается серым цветом и в верхнем регистре. Кроме того, должна остановиться анимация, так что бы зритель имел больше времени для просмотра изображения или чтобы прочитать длинный текст. При этом в верхнем правом углу будет показан значок “пауза”.
- Вся презентация, как обычно, заключена в рамку и имеет тень.
Так как я хочу показать рядом с фотографиями сопроводительный текст, я буду строить HTML5 код с “figure-Elemente», а также расширю его, включив дополнительные “figcaption-Elemente“. В первом примере построим слайдер с “DIV” контейнером и пятью разными именами, это реализуется просто и элегантно.
Для индикатора в нижней части слайдера, вам нужен отдельный контейнер “DIV” с именем “Load“, а также для значок паузы с именем “Pause”. Но в целом скелет HTML5 остается очень четким и имеет одинаковую структуру для всех примеров.
<div id="stapel">
<figure>
<img src="bilder600/Cottage.jpg" width="600"
height="400" alt="Kleines Cottage">
<figcaption>Kleines Cottage mit Reetdach</figcaption>
</figure>
<figure>
<img src="bilder600/Runch.jpg" width="600"
height="400" alt="Weiler Runch">
<figcaption>Der Weiler Runch</figcaption>
</figure>
<figure>
<img src="bilder600/Gerfalke.jpg" width="600"
height="400" alt="Gerfalke">
<figcaption>Gerfalke</figcaption>
</figure>
<figure>
<img src="bilder600/Wollkopfgeier.jpg" width="600"
height="400" alt="Wollkopfgeier">
<figcaption>Wollkopfgeier</figcaption>
</figure>
<figure>
<img src="bilder600/Lobiser-Schupfen.jpg" width="600"
height="400" alt="Lobiser-Schupfen">
<figcaption>Lobiser-Schupfen</figcaption>
</figure>
<div class="laden"></div>
<div class="pause"></div>
</div>
Так как при наведении мыши на изображение, анимация должна остановится, мы покажем курсор “рука”.
Изображения позиционируются абсолютно с добавлением “opacity: 0“.
Сопровождающие тексты, отмечены элементом HTML5 “figcaption“. Здесь определяется шрифт, цвет шрифта и его тень, также размер и расположение “Schriftbox“. Сначала, текст за кадром, и только тогда, когда мышь находится над изображением, текст, за полсекунды, появится слева.
#stapel {
position: relative;
background: #000;
height: 25em;
width: 37.5em;
margin: 1em auto -2em;
border: 5px solid #eee;
box-shadow: 1px 1px 5px 2px #777;
cursor: pointer;
overflow: hidden;
}
#stapel figure {
position: absolute;
margin: 0;
height: 25em;
width: 37.5em;
opacity: 0;
}
#stapel figcaption {
position: relative;
color: #444;
font: 1.5em/2.5 Verdana, Arial, serif;
text-transform: uppercase;
text-align: center;
text-shadow: -1px -1px 0 rgba(255, 255, 255, .3), 1px 1px 0 #505050;
background: rgba(255, 255, 255, .7);
border: 1px solid #fff;
border-left: 0;
height: 2.9em;
width: 12.4em;
bottom: 80px;
left: -320px;
transition: .5s;
}
#stapel:hover figcaption {
left: 0;
}
Прогресс-бар
Следующее, что определяется в таблице стилей является “прогресс бар”. И в этом, на самом деле нет ничего сложного.
Это просто контейнер “DIV“, который находится в нижней части слайдера с высотой 2 пикселя, и имеет анимацию в 6 секунд. В течение этого времени, ширина контейнера увеличивается от 0% до 100% и представлена цветами радуги, вот так, относительно легко реализовано. Что бы, при этом, бар всегда был виден, контейнер “DIV” с “Z“-индексом: “2“, располагается на переднем плане.
.laden {
position: relative;
background: linear-gradient(90deg,#f00,#ffa500,#ff0,
#008000,#00f,#800080);
width: 37.5em;
height: .125em;
bottom: -398px;
animation: balken 6s ease-out infinite;
z-index: 2;
}
@keyframes balken {
0% {width: 0; opacity: 0;}
10% {width: 0; opacity:.2;}
80% {width:100%; opacity:.8;}
100% {width:100%; opacity: 0;}
}Значок “Пауза”
Теперь реализуем значок “Пауза”. Поскольку значок состоит из двух заглавных букв “I” и должен быть расположен поверх изображения, контейнер должен иметь значение “position: absolute” . Только тогда, когда указатель мыши находится над изображением, значок появляется с непрозрачностью “1” за пол – секунды, на переднем плане.
.pause {
position: absolute;
top: 5px;
left: 570px;
color: #eee;
font: bolder 1.3em/2 Impact;
opacity: 0;
transition: .5s;
z-index: 2;
}
.pause:after {
content: 'I I';
}
#stapel:hover .pause {
opacity: 1;
}
CSS3 переходы и ключевой кадр анимации
А вот действительно интересная часть CSS3.
На протяжении всей анимации, то есть, пока показываются все пять изображений, избрана задержка воспроизведения в 30 секунд и анимация с помощью “infinite” повторяеся в бесконечном цикле. Для вызова правил “@keyframes”, я использую снова псевдо-класс “nth-of-type”.
При нахождении мыши над изображением, анимация останавливается.
В правилах “@ KeyFrames” вводом значений “top:” установлено движение изображений, а также с помощью”opacity” устанавливается их видимость.
#stapel figure:nth-of-type(1) {
animation: bild 30s ease-in-out infinite;
}
#stapel figure:nth-of-type(2) {
animation: bild 30s 6s ease-in-out infinite;
}
#stapel figure:nth-of-type(3) {
animation: bild 30s 12s ease-in-out infinite;
}
#stapel figure:nth-of-type(4) {
animation: bild 30s 18s ease-in-out infinite;
}
#stapel figure:nth-of-type(5) {
animation: bild 30s 24s ease-in-out infinite;
}
#stapel:hover figure,
#stapel:hover .laden {
animation-play-state: paused;
}
@keyframes bild {
0%, {top:-400px; opacity:0; z-index:0;}
6.66%, {top:0; opacity:1; z-index:1;}
20% {top:0; opacity:1; z-index:1;}
26.66% {top: 400px; opacity:0; z-index:0;}
100% {top:-400px; opacity:0; z-index:0;}
}
Краткий вариант правил “@keyframes” выглядит следующим образом:
@keyframes bild {
6.66%, 20% {top:0; opacity:1; z-index:1;}
26.66% {top: 400px; opacity:0; z-index:0;}
0%, 100% {top:-400px; opacity:0; z-index:0;}
}
Расчет процентов для анимации выглядит следующим образом:
A: Количество (5 изображений)
Z: Время, в течении которого изображение видно полностью (4 Sekunden)
D: Dauer einer Überblendung (2 секунды)
G = ( Z + D ) * A: Общее время анимации (30 секунд)
S = G / A: Задерка (6 секунд)
– – – – – – – – – – – – – – – – – – – – – – – – – – – – –
{top:-400px; opacity:0;} – = 0%
{top:0; opacity:1;} – [ 100% * D / G ] = 6,66%
{top:0; opacity:1;} – [ 100% / A ] = 20%
{top: 400px; opacity:0;} – [ 100% * ( Z + ( 2 * D ) ) / G ] = 26,66%
{top:-400px; opacity:0;} – = 100%
Вот и все. CSS3 Slider с индикатором прогресса и функцией паузы закончен.
Чтобы изменить направление движения на справа налево, , необходимо лишь изменить информацию “top:” на right:” и значения к нему.
В следующем примере, новое изображение надвигается на видимое, а также анимация текста несколько иная.
Ниже показаны только изменённые инструкции CSS3 по отношению к первому примеру.
#stapel2 figcaption {
position: absolute;
color: #444;
font: 1.5em/2.5 Verdana, Arial, serif;
letter-spacing: .1em;
word-spacing: .1em;
text-align: center;
text-shadow: -1px -1px 0 rgba(255, 255, 255, .3), 1px 1px 0 #505050;
background: rgba(255, 255, 255, .7);
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
width: 100%;
animation: t12 6s 2s infinite;
}
@keyframes t12 {
0%, 80%, 100% {bottom:-65px;}
15%, 65% {bottom: 2px;}
}
#stapel2:hover figure,
#stapel2:hover figcaption,
#stapel2:hover .laden {
animation-play-state: paused;
}
@keyframes bild1 {
6.66%, 20% {right:0; opacity:1; z-index:1;}
26.66% {right:0; opacity:0; z-index:0;}
0%, 100% {right:-600px; opacity:0; z-index:0;}
}Пример:
В следующем примере, новое изображение выталкивает видимое изображение из поля зрения.
Ниже, снова, приведены только модифицированные инструкции CSS3 по отношению к первому примеру.
#stapel3 figcaption {
position: relative;
overflow: hidden;
color: #fff;
font: 1.3em/2.5 Verdana, Arial, serif;
letter-spacing: .1em;
text-align: center;
max-width: 380px;
margin: 0 auto;
bottom: 50px;
opacity: 0;
transition: 1s;
}
#stapel3 figcaption:after {
position: absolute;
bottom: 10px;
left: 0;
top: 0;
width: 100%;
height: .1em;
background: #fff;
content: '';
transition: transform .5s;
transform: translate3d(-100%,0,0);
}
#stapel3:hover figcaption,
#stapel3:hover figcaption:after {
opacity: 1;
transform: translate3d(0,0,0);
}
@keyframes bild3 {
6.66%, 20% {right:0; opacity:1; z-index:1;}
26.66% {right: 600px; opacity:0; z-index:0;}
0%, 100% {right:-600px; opacity:0; z-index:0;}
}Пример:
В последнем примере, новая картинка и видимая вращаются относительно друг друга. Текст анимации так же, как и в предыдущем примере.
Ниже, только модифицированные инструкции CSS3 относительно первого примера.
#stapel4 figcaption {
position: relative;
overflow: hidden;
color: #fff;
font: 1.3em/2.5 Verdana, Arial, serif;
letter-spacing: .1em;
text-align: center;
max-width: 380px;
margin: 0 auto;
bottom: 50px;
opacity: 0;
transition: 1s;
}
#stapel4 figcaption:after {
position: absolute;
bottom: 10px;
left: 0;
top: 0;
width: 100%;
height: .1em;
background: #fff;
content: '';
transition: transform .5s;
transform: translate3d(-100%,0,0);
}
#stapel4:hover figcaption,
#stapel4:hover figcaption:after {
opacity: 1;
transform: translate3d(0,0,0);
}
@keyframes bild4 {
6.66%, 20% {transform:rotate(360deg); opacity:1; z-index:1;}
26.66% {transform:rotate(180deg); opacity:0; z-index:0;}
0%, 100% {transform:rotate(180deg); opacity:0; z-index:0;}
}Пример:
Теперь вы можете, реализовать множество различных вариантов слайдера.
