Верстка и веб-дизайн. 3 курс. Практическое занятие №7. Верстка анимированных объектов на основе keyframes

Вам нужно создать сценарий экранной анимации с несколькими слоями графики (4-5) и двумя движущимися объектами.

Подготовительный этап:

1.Создайте пять слоев фона с прозрачной подложкой в формате .png таким образом, чтобы при наложении друг на друга они образовывали целостную картину. Все слои должны быть одинаковы по ширине, но различаться по высоте. Палитра слоев должна становиться более светлой по мере удаления от поверхности экрана. Загрузите все готовые объекты в репозиторий.

Общая схема слоев и движущихся объектов из моего примера:

2. Создайте два движущихся объекта в виде статичных силуэтов с прозрачным фоном в формате .png. Объекты должны быть меньше слоев и соотноситься с ними так, чтобы выглядеть естественно. Загрузите оба объекта в репозиторий.

Стили:

3. Укажите в общем селекторе, что объекты будут помещаться внутри блока:

* {

  box-sizing: border-box;

}

4. Для основного содержимого укажите необходимый шрифт:

body {

  font-family: '?', sans-serif;

}

5. Создаем общий класс сцены и указываем цвет фона подложки:

.scene {

  width: 100%;

  height: 100%;

  min-height: 450px;

  position: relative;

  top: 0;

  left: 0;

  background-color: ваш цвет;

  transform: translate3d(0, 0, 0);

}

6. Создаем классы для каждого слоя анимации. В каждом из них укажите следующие атрибуты:

animation: animation_fg linear 30s infinite both; 

Длительность в секундах измените для каждого слоя. В моем примере она следующая: 30s, 55s, 75s, 95s, 120s. То есть чем дальше слой, тем медленнее он движется - также как в реальности: горизонт меняется медленнее, чем близко расположенные объекты.

background: url(?) 0 100% repeat-x;

В адресации укажите путь к соответствующему файлу слоя из репозитория.

z-index: 1;

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 100%;

background-size: auto 145px;

Пиксели в размере фона должны совпадать с высотой вашего слоя и, соответственно, в каждом слое быть своими.

Пример одного такого класса из моего проекта:

.level-2 {

  animation: animation_fg linear 30s infinite both;

  background: url(https://raw.githubusercontent.com/Dmitrykonn/displayanimation/main/2.png) 0 100% repeat-x;

  z-index: 1;

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-size: auto 145px;

}

Для выстраивания слоев в логичном порядке, в их имени можно менять только цифру для каждого слоя.

7. Создайте два разных класса для объектов, которые у вас будут двигаться по фону. Укажите в них следующие атрибуты:

background: url(?) 0 100% no-repeat;

z-index: 1;

position: absolute;

bottom: 100px;

left: 0;

width: 100%;

height: 100%;

background-size: auto 75px;

animation: animation_название класса вашего объекта linear 10s infinite both;

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

Пример таких классов из моего проекта:

.coach-1 {

  background: url(https://raw.githubusercontent.com/Dmitrykonn/displayanimation/main/coach1.png) 0 100% no-repeat;

  z-index: 1;

  position: absolute;

  bottom: 100px;

  left: 0;

  width: 100%;

  height: 100%;

  background-size: auto 75px;

  animation: animation_coach linear 10s infinite both;

}

и второй:

.coach-2 {

  background: url(https://raw.githubusercontent.com/Dmitrykonn/displayanimation/main/coach2.png) 0 100% no-repeat;

  z-index: 1;

  position: absolute;

  bottom: 100px;

  left: 0;

  width: 100%;

  height: 100%;

  background-size: auto 75px;

  animation: animation_coach linear 10s infinite both;

}

8. Чтобы создать эффект движения, аналогичный моему, продублируйте класс вашего второго движущегося объекта со следующими атрибутами:

animation: animation_название класса вашего объекта linear 15s infinite both;

В моем примере это выглядит так:

.coach-2 {

  animation: animation_coach linear 15s infinite both;

}

9. Теперь вам нужно задать правило keyframes для слоев фона и для движущихся объектов. Для слоев я использую следующие значения:

@keyframes animation_fg {

  0% {

    background-position: 2765px 100%;

  }

  100% {

    background-position: 550px 100%;

  }

}

10. Для движущихся объектов такие:

@keyframes animation_название класса ваших движущихся объектов {

  0% {

    background-position: -300px 100%;

  }

  100% {

    background-position: 2000px 100%;

  }

}

HTML

11. Укажите стандартные данные и заголовок:

<!DOCTYPE html>

<html lang="en" >

<head>

  <meta charset="UTF-8">

  <title>Title</title>

12. Встройте стандартную библиотеку CSS. Взять ее можно здесь: https://raw.githubusercontent.com/Dmitrykonn/displayanimation/main/meyer-reset.css

13. Закройте </head>, внутри <body> разверните классы из CSS. Сначала класс вашей сцены, затем в него вложены классы слоев, начиная с последнего, а между ними, там, где нужно, классы ваших движущихся объектов. В моем примере объекты движутся между слоями 4 и 3.

Классы слоев задаются по типу: 

<div class="animation-общее имя класса слоев имя конкретного класса слоя"></div>

Рекомендуется называть слои через тире с номером, для простоты создания анимации, тогда у вас будет условный слой-1, слой-2 и т.д. Не забывайте, что все названия - только латиницей! Таким же образом - через тире с цифрой следует назвать и движущиеся объекты.

Классы движущихся объектов задаются по типу:

<div class="animation-общее имя класса слоев имя конкретного класса объекта"></div>

В моем примере это выглядит так:

<div class="scene">

  <div class="animation-level level-6"></div>

  <div class="animation-level level-5"></div>

  <div class="animation-level level-4"></div>

  <div class="animation-level coach-1"></div>

  <div class="animation-level coach-2"></div>

  <div class="animation-level level-3"></div>

  <div class="animation-level level-2"></div>

  <div class="animation-level level-1"></div>

</div>

14. Закройте оставшиеся теги:

</body>

</html>

15. Проведите отладку анимации, если ее скорость, положение или отображение выглядят негармонично. 

16. При смещении макета добавьте класс упаковки в CSS, в нем же можно отрегулировать отступ сверху и высоту объекта:

.box {

  width: 100%;

  height: 600px;

  position: absolute;

  margin-top: -400px;

  overflow: auto;

}

И оберните соответствующим классом класс сцены в HTML:

<div class="box"> строкой выше класса сцены, и после всех слоев сцены закройте </div>

Если все сделано верно, то ваша анимация будет выглядеть схожим образом: https://konoplevdesign3.blogspot.com/p/animation-box-sizing-border-box-body.html

Ссылки на выполненное задание принимаются в комментарии к данному посту до 15:00 29 апреля.