Целевая страница любого сайта — это то, что первым привлекает внимание пользователя. Но страница с тяжелыми активами может занять несколько секунд, и, поскольку никто не любит ждать, это может негативно повлиять на работу пользователя. Один из вариантов — добавить экран загрузки — чтобы не допустить ожидание, вы можете медленно показывать контент с помощью умных анимаций. Читайте дальше, чтобы узнать, как …

Получить файлы проекта чтобы помочь в этом руководстве.

01 , Инициировать структуру HTML

. Первый шаг — инициировать структуру HTML-документа. Это состоит из контейнера для документов, который, в свою очередь, содержит разделы головы и тела. Хотя головная часть используется для загрузки внешних CSS и JavaScript, раздел тела используется для хранения содержимого, созданного на шаге 2.

  







  *** ШАГ 2 ЗДЕСЬ

  

02. Добавить содержимое HTML

Содержимое веб-страницы определяется как нормальное — в этом случае заголовок и абзац h1 были помещены. Экран загрузки вставлен в качестве последнего элемента, чтобы гарантировать, что он имеет индекс z над всем содержимым страницы. Этот элемент имеет атрибут «загрузка данных», а также ряд внутренних элементов span, которые должны быть стилизованы для целей презентации на последующих этапах.

  
 Что-то 
 Что-то еще. 

     
     
  

03. Подтверждение JavaScript

Создайте новый файл с именем 'code.js'. Изменение HTML-кода для указания завершения загрузки страницы — это удобный способ инициировать изменения презентации CSS. JavaScript используется для применения прослушивателя событий к окну страницы для завершения загрузки. Этот прослушиватель изменяет значение контейнера «загрузка данных» на «завершено» при загрузке страницы.

  window.addEventListener («load», function () {
  var node = document.querySelector ("[data-loading]");
  node.setAttribute ( "данные загрузкой", "полный");
});  

04. Контейнер для загрузки данных

Создайте новый файл под названием 'styles.css'. Этот первый шаг файла CSS инициирует контейнер «загрузка данных». Фиксированное позиционирование используется, чтобы гарантировать, что экран загрузки всегда отображается. По той же причине положение и размер устанавливаются так, чтобы покрывать полноэкранную видимость, чтобы скрыть содержимое любой страницы.

  [data-loading] {
  позиция: фиксированная;
  display: block;
  ширина: 100 вольт;
  top: 0;
  left: 0;
  высота: 100vh; }  

05. Элементы первого уровня

Элементы уровня первого уровня в контейнере «загрузка данных» оформлены в соответствии с полной высотой и половиной ширины окна браузера. Абсолютное позиционирование применяется для обеспечения возможности размещения этих элементов с координатами пикселей. Переполнение установлено в скрытое, так что закрывающая анимация скрывает его внутреннее содержимое.

  [data-loading] > * {
  display: block;
  позиция: абсолютная;
  ширина: 50vw;
  высота: 100vh;
  переполнение: скрыто;
}  

06. Уникальное позиционирование

Левая и правая стороны экрана загрузки требуют уникального позиционирования для работы эффекта. Первый элемент дочернего диапазона внутри контейнера «загрузка данных» установлен в верхний левый угол с черным фоном. Второй элемент диапазона расположен справа внизу с красным фоном.

  [data-loading] > *: first-child {
  top: 0;
  left: 0;
  фон: черный;
}
[data-loading]> *: last-child {
  bottom: 0;
  право: 0;
  transform: rotate (180deg);
  фон: красный;
}
 

07. Дети второго уровня

Дети второго уровня контейнера «загрузка данных» являются элементами span внутри элементов span. Эти элементы размещаются для визуального эффекта — появляются как блоки, установленные как обратные цвета их родительского контейнера. Абсолютное позиционирование вместе с единиц измерения «vh» позволяет размещать эти элементы в зависимости от размера окна браузера.

  [data-loading] > *> * {
  display: block;
  позиция: абсолютная;
  ширина: 10vh;
  высота: 10vh;
  верх: 45vh;
  право: 0;
  фон: красный;
}
[data-loading]> *: last-child> * {
  фон: черный;
}  

08. Загрузка завершена

Значение «полного» JavaScript, применяемое к атрибуту «загрузка данных», указывает, что страница завершила загрузку. Правила CSS определены для запуска необходимых анимаций, когда это происходит. Основная «открытая» анимация предназначена для воспроизведения в течение одной секунды и использует воспроизведение «вперед» для остановки в последнем анимационном кадре.

  [data-loading="complete"] {
  анимация: закрыть 0s вперед;
  анимация-задержка: 3 с;
}
[data-loading="complete"]> * {
  анимация: откройте 1s вперед;
  анимация-задержка: 2 с;
}  

09. Определение анимации

Открытые и закрытые анимации определяются с использованием ключевых кадров. Открытая анимация просто определяется как начиная с полной высоты окна, а затем заканчивается на нулевой высоте; в результате чего элементы анимации исчезнут. Ближайшая анимация используется для размещения контейнера «загрузка данных» под содержимым страницы, что позволяет ей стать препятствием для взаимодействия с содержимым страницы.

  @keyframes open {
  от {height: 100vh; }
  до {height: 0;}
}
@keyframes закрыть {
  к {z-index: -100;}
}  

Эта статья изначально появилась в журнале Web Designer. Подпишитесь здесь .

Помните — всегда думайте о пользователе

Создать Лондон 2018 — Конференция для веб-дизайнеров