[Урок 27] Первый сайт на Zero Block (9 часть - начинаем третий блок)

Всем привет. Продолжаем разработку сайта на Zero Block. Напомню, что мы сверстали уже 2 блока нашего сайта вебинара.

Сегодня начнём вёрстку третьего блока, а начнём мы с интересного эффекта для заднего фона. Поехали!

Как-то так. Приступаем к вёрстке 3-го блока. Сразу открываем PSD макет (ищите в материалах на канале) и создаём пустой Zero Block.

Высота блока: 1465 пикселей. Согласно макету.

В шаблоне мы видим, что у нас на жёлтый фон накладывается чёрный блок. Я хочу сделать, чтобы он перемещался по радиусу, якобы "плавал" на странице.

Во первых. В настройках делаем фон цвета: #fcb224

Далее создаём фигуру (Add Shape) и заливаем её чёрным цветом.

Нажимаем CTRL - и делаем рабочую область на 50% видимости (примерно). Так будет удобнее. Растягиваем блок как изображено на скрине:

Далее, открываем настройки блока и ищем параметр ROTATE. Ставим 3.
Чёрный квадрат немного сместится.

Открываем пошаговую анимацию

В настройках квадрата открываем пошаговую анимацию и устанавливаем следующие параметры:

EVENT: element on screen (анимация производится когда элемент на экране)

LOOP: LOOP (зацикливаем анимацию)

Добавляем первый шаг.

DURATION: поставим 3. Скорость самой анимации, я хочу чтобы она выглядела плавно.

Опять ищем ROTATE и ставим на первый шаг -3.

Добавляем ещё один шаг и ставим -6

Добавляем ещё один шаг и ставим -3

Добавляем ещё один шаг и ставим 0.

Таким образом мы вернули вращение блока к его исходной точке (0). Закрываем, сохраняем и смотрим.

Блок интересно плавает. Готово. Это нам и нужно было.

На этом всё, успехов!)