Site icon Vavik96

Небольшое слайд-шоу с эффектом постепенного затухания.

Эффект затухания этого небольшого слайд-шоу очень легко реализовать с помощью 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%

Готово и, при этом, конец оптимизации!
С помощью этих простых средств были созданы красивые и плавные переходы в слайд-шоу, пример которого можно посмотреть ниже:


 

Оригинал / Перевод

Exit mobile version