Эффект затухания этого небольшого слайд-шоу очень легко реализовать с помощью CSS3. Эффект обеспечивает плавнуюую и мягкую смену элементов. И главное, эффект представленный здесь обходится без JavaScript.
Можно любой “DIV” контейнер, в том числе и с текстом, настроить на эффект с мягким, постепенным затуханием.
В этом примере описано небольшое слайд-шоу с затуханием (FADE) пяти изображений и показаны шаги, необходимые для его создания.
Для начала расположим фотографии друг за другом в ряд в отдельном контейнере “DIV” с именем “stapel”, как видно в HTML:
<div id="stapel">
<img src="reisen_suedtirol201005.jpg" width="800" height="551"
alt="Gesamtansicht der Lobiser Schupfen">
<img src="reisen_suedtirol201004.jpg" width="800" height="551"
alt="Lobiser Schupfen">
<img src="reisen_suedtirol201003.jpg" width="800" height="551"
alt="Lobiser Schupfen">
<img src="reisen_suedtirol201002.jpg" width="800" height="551"
alt="Gabel-Spitze - Am Ende des Knuttental">
<img src="reisen_suedtirol201001.jpg" width="800" height="551"
alt="Schnee im Knuttental bei Rein in Taufers">
</div>
Изображения в контейнере “DIV” “stapel” выровнены абсолютно с помощью CSS.
Это гарантирует, что изображения отображаются в одном месте, без сдвига.
#stapel {
height: 34.438em;
width: 50em;
margin: -2.5em auto 1.2em;
border: 5px solid #eee;
box-shadow: 1px 1px 5px 2px #777;
}
#stapel img {
position: absolute;
height: 34.438em;
width: 50em;
}
К этому моменту все изображения будут сложены и будет видно последнюю картину. А для тех браузеров, которые не могут отображать следующую анимацию (например, IE8), на этом всё закончится и будет видно только последнее изображение.
Поскольку изображения должны плавно появляться и сменяться, устанавливаем “opacity: 0” и в свойствах анимации CSS3 добавляется элемент “#stapel img“.
Для всей анимации (смена всех пяти изображений), выбрано 30 секунд. И так как эта анимация должна работать в бесконечном цикле, свойство “animation-iteration-count” используется с необходимой величины “infinite”.
#stapel img {
position: absolute;
height: 34.438em;
width: 50em;
opacity: 0;
animation-duration: 30s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
Или сокращенные обозначения:
#stapel img {
position: absolute;
height: 34.438em;
width: 50em;
opacity: 0;
animation: 30s ease-in-out infinite;
}
Теперь нужно назначить различное время анимации для каждого изображения.
Можно назначить каждому изображению свой ”класс” и, таким образом, решить в индивидуальном порядке. Но в этом случае назначим анимациям получат собственные имена и использовуем псевдо-класс “nth-of-type“. Информация, содержащаяся в CSS для образования имен и эффекта перехода выглядит следующим образом:
#stapel img:nth-of-type(1) {
animation-name: fade1;
}
#stapel img:nth-of-type(2) {
animation-name: fade2;
}
#stapel img:nth-of-type(3) {
animation-name: fade3;
}
#stapel img:nth-of-type(4) {
animation-name: fade4;
}
#stapel img:nth-of-type(5) {
animation-name: fade5;
}
@keyframes fade1 {
0% {opacity:1;}
10% {opacity:1;}
20% {opacity:0;}
30% {opacity:0;}
40% {opacity:0;}
50% {opacity:0;}
60% {opacity:0;}
70% {opacity:0;}
80% {opacity:0;}
90% {opacity:0;}
100% {opacity:1;}
}
@keyframes fade2 {
0% {opacity:0;}
10% {opacity:0;}
20% {opacity:1;}
30% {opacity:1;}
40% {opacity:0;}
50% {opacity:0;}
60% {opacity:0;}
70% {opacity:0;}
80% {opacity:0;}
90% {opacity:0;}
100% {opacity:0;}
}
@keyframes fade3 {
0% {opacity:0;}
10% {opacity:0;}
20% {opacity:0;}
30% {opacity:0;}
40% {opacity:1;}
50% {opacity:1;}
60% {opacity:0;}
70% {opacity:0;}
80% {opacity:0;}
90% {opacity:0;}
100% {opacity:0;}
}
@keyframes fade4 {
0% {opacity:0;}
10% {opacity:0;}
20% {opacity:0;}
30% {opacity:0;}
40% {opacity:0;}
50% {opacity:0;}
60% {opacity:1;}
70% {opacity:1;}
80% {opacity:0;}
90% {opacity:0;}
100% {opacity:0;}
}
@keyframes fade5 {
0% {opacity:0;}
10% {opacity:0;}
20% {opacity:0;}
30% {opacity:0;}
40% {opacity:0;}
50% {opacity:0;}
60% {opacity:0;}
70% {opacity:0;}
80% {opacity:1;}
90% {opacity:1;}
100% {opacity:0;}
}
Для эффекта перехода, можно изменить прозрачность изображений следующим образом.
Первое изображение начинает медленно растворяется через 10% выделенного времени, пока полностью не исчезнет после 20%, “opacity: 0“. В течение этого времени, второе изображение начинает медленно проявляться, таким образом, что после 15%, когда первое изображение наполовину растворилось, второе изображение становится наполовину видимо. других изображений происходит таким же образом.
И так как в правилах “@keyframes” должно происходить только изменение состояний, а также одинаковые значения могут быть объединены, CSS получается совсем небольшим:
@keyframes fade1 {
0%, 10%, 100% {opacity:1;}
20%, 90% {opacity:0;}
}
@keyframes fade2 {
0%, 10%, 40%, 100% {opacity:0;}
20%, 30% {opacity:1;}
}
@keyframes fade3 {
0%, 30%, 60%, 100% {opacity:0;}
40%, 50% {opacity:1;}
}
@keyframes fade4 {
0%, 50%, 80%, 100% {opacity:0;}
60%, 70% {opacity:1;}
}
@keyframes fade5 {
0%, 70%, 100% {opacity:0;}
80%, 90% {opacity:1;}
}
Оптимизированные данные
Поскольку отдельные правила “@ KeyFrames” для всех изображений одинаковы, можно использовать только одно правило, но с расположенными последовательно значениями времени запуска для всех изображений. Это означает, что информация о анимации (продолжительность анимации и характер перехода) больше не находится в “#stapel IMG“, а может быть определена для каждого изображения в правилах “@ KeyFrames“.
Расчет времени анимации и старта. В скобках указаны значения для этого небольшого слайд-шоу:
A: Количество изображений (5)
Z: Время, которое изображение полностью видно (4 секунды)
D: Длительность перехода (2 секунды)
G = ( Z + D ) * A: Полное время анимации (30 секунд)
S = G / A: Сдвиг времени старта (6 секунд)
Время старта сдвигается последовательно на 6 секунд. Таким образом, анимация для первого изображения начинается с 0 секунд, второе изображение после 6 секунд, следующее через 12 секунд, и так далее.
Новый и гораздо меньший CSS со всеми подробностями:
#stapel {
height: 34.438em;
width: 50em;
margin: -2.5em auto 1.2em;
border: 5px solid #eee;
box-shadow: 1px 1px 5px 2px #777;
}
#stapel img {
position: absolute;
height: 34.438em;
width: 50em;
opacity: 0;
}
#stapel img:nth-of-type(1) {
animation: fade 30s ease-in-out infinite;
}
#stapel img:nth-of-type(2) {
animation: fade 30s 6s ease-in-out infinite;
}
#stapel img:nth-of-type(3) {
animation: fade 30s 12s ease-in-out infinite;
}
#stapel img:nth-of-type(4) {
animation: fade 30s 18s ease-in-out infinite;
}
#stapel img:nth-of-type(5) {
animation: fade 30s 24s ease-in-out infinite;
}
@keyframes fade {
6.66%, 20% {opacity:1;}
0%, 26.66%, 100% {opacity:0;}
}
Чего не хватает, так это объяснения того, как рассчитать проценты непрозрачности “opacity” определенные в правилах “@KeyFrames“.
Что бы так же, при первом проходе анимации, то есть от 0 до 30 секунд, было видно затухание изображения, непрозрачность должна быть установлена на 0% “opacity: 0”.
Другие проценты рассчитываются в соответствии со схемой, описанной выше. В скобках указаны значения для этого небольшого слайд-шоу:
A: Количество изображений (5)
Z: Время, которое изображение полностью видно (4 секунды)
D: Длительность перехода (2 секунды)
G = ( Z + D ) * A: Полное время анимации (30 секунд)
S = G / A: Сдвиг времени старта (6 секунд)
– – – – – – – – – – – – – – – – – – – – – – – – – – – – –
{opacity:0;} – = 0%
{opacity:1;} – [ 100% * D / G ] = 6,66%
{opacity:1;} – [ 100% / A ] = 20%
{opacity:0;} – [ 100% * ( Z + ( 2 * D ) ) / G ] = 26,66%
{opacity:0;} – = 100%
Готово и, при этом, конец оптимизации!
С помощью этих простых средств были созданы красивые и плавные переходы в слайд-шоу, пример которого можно посмотреть ниже: