Как ни странно, появление элементов с задержкой создает впечатление, что веб-сайт работает быстрее: благодаря появляющимся элементам, у посетителей создается более благоприятное впечатление о веб-сайте. Перед тем, как создавать этот эффект, подготовим разметку. В примере ниже у нас есть коллекция фотографий в блоке:

<div id="fds">
        <img src="tuwanek-sunshine-coast-bc.jpg" alt="Tuwanek Sunshine Coast">
        <img src="hornby-island-shoreline.jpg" alt="Hornby Island shoreline">
        <img src="mt-baker-washington.jpg" alt="Mt Baker, Washington">
        <img src="nelson-bridge.jpg" alt="Nelson Bridge, Vancouver">
        <img src="golden-skies-victoria.jpg" alt="Golden skies, Victoria">
        <img src="first-beach-vancouver.jpg" alt="First beach, Vancouver">
</div>

Основной код CSS очень простой:

#fds {
        font-size: 0;
}
#fds img {
        width: 33.33%;
        opacity: 0;
}

Обратите внимание на использование нулевого размера шрифта для устранения всех дополнительных пробелов внутри блока.

Создание последовательности появления изображений с использованием только кода CSS

Последовательное появление может быть создано с помощью анимации ключевых кадров и свойства CSS задержки анимации. Обычно анимация вызывается с использованием значений задержки, возрастающих на одинаковую величину. Обратите внимание, что тут даны свойства без приставок производителей, которые и не нужны в большинстве современных версий браузеров, для упрощения кода.

@keyframes fdsseq { 
        100% { opacity: 1; }
}
#fds img {
        animation: fdsseq .5s forwards;
}
#fds img:nth-child(1) {
        animation-delay: .5s;
}
#fds img:nth-child(2) {
        animation-delay: 1s;
}
#fds img:nth-child(3) {
        animation-delay: 1.5s;
}
…

В результате получим следующее:

Хотя этот подход и работает, как видно выше, у него есть несколько недостатков.

Ограничения способа с использованием только кода CSS

При использовании только кода CSS сложно изменить продолжительность анимации по следующим причинам:

1) Изменение значения задержки анимации для начального элемента приведет к необходимости переписать эти значения и у последующих элементов.

2)  Код CSS не особо масштабируется: чем больше изображений нужно добавить, тем больше строк кода нужно написать.

3) Свойству задержки CSS нельзя задать возрастание на определенное значение, также нельзя рассчитывать, что страница загрузится так, чтобы элементы появились последовательно: скорость интернета и приоритет порядка загрузки могут слишком сильно отличаться, чтобы можно было рассчитывать на создание нужного впечатления.

Так что наилучшим способом для создания последовательного появления большого количества элементов будет использование JavaScript.

Создание привлекающей анимации

Элементы появляются последовательно каждый раз при загрузке страницы. Из-за этого важно, чтобы появление происходило как можно быстрее и не занимало больше пары секунд для всех изображений. Хотя неторопливое и грациозное вступление может казаться привлекательным, оно будет только раздражать посетителей.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование наборов изображений в HTML5
• Создание простой адаптивной веб-страницы
• Анимации элементов по дугам, окружностям и эллипсам с использованием CSS