[Урок 34] Интернет-магазин на Zero Block (1 экран)

Всем большой привет! Наконец-то добрался до вёрстки магазина. Уверен этого ждали многие. Макет все скачали? Никто не забыл? Тогда пора начинать!

Сегодня мы начнём делать первый экран интернет-магазина молочной продукции. Запасаемся терпением, открываем макет и начинаем!

Начнём с фона.

Добавляем новый Zero Block. Для начала займёмся высотой экрана.

Открываем макет, смотрим - высота 650 пикселей. Ставим 650 и делаем растяжение на 100% по высоте.

Окей.
Теперь загружаем фоновое изображение. Открываем папку с материалами и ищем файл "background.png". Загружаем его на фон. Делаем выравнивание фона по центру.

Добавим изображения.

Справа у нас кувшин с молоком и трава. Я специально разделил эти объекты, чтобы заанимировать их.

Нажимаем на крестик в верхнем левом углу и добавляем изображение (Add image), а лучше добавим сразу два.

Открываем настройки первого изображения и загружаем туда файл "milk.png"

Во второе изображение соответственно загружаем траву - файл "grass.png"

Отлично. Изображения на месте, теперь нам следует их правильно расположить.

Открываем макет и видим, что кувшин заканчивается приблизительно на середине восьмой колонки.

Растягиваем кувшин и помещаем в рабочую область согласно области макета.

Не забывайте, что ширина рабочей области всего 1200px в ширину. Поэтому я сделал кувшин чуточку больше.

По ширине он получился 816 пикселей.

Аналогично поступаем с изображением травы. Не забываем поместить её на задний план.

Анимируем объекты.

Для этого я воспользуюсь базовой анимацией.
Сайт у нас очень нежный, если его можно так назвать, поэтому я буду использовать эффект "Fade In".

Сначала анимируем кувшин.
Открываем настройки и ищем "Basic Animation".

Выбираем эффект fade in.

Duration - продолжительность анимации сделаю на 2 (две секунды).
Остальные настройки можно не трогать.
Нажимаем на кнопку "Play Element", чтобы проиграть анимацию и убедиться в том, что всё идёт по плану.

Анимируем траву

Идём в те же настройки и открываем базовую анимацию.
Идея в том, чтобы сначала плавно появлялся кувшин, а потом трава.

Выбираем эффект fade in.

Duration - поставим немного поменьше - 1 секунду.

Delay - очень важный параметр, который нам нужен. Это задержка этой анимации. Как я уже говорил, сначала появится кувшин (моментально), а через полторы секунды должна появиться трава, поэтому ставим 1.5 в delay.

Нажимаем на кнопку "Play all", чтобы посмотреть всю анимацию сразу.

Запилил гифку, чтобы посмотреть как это выглядит. Надеюсь, у вас получается так же)

Итог: добавили фон, пару объектов и анимацию.
В следующем уроке добавим остальные объекты, настроим шрифты и выполним меню.

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