00:00:00 — Привет! Сегодня создаём главный блок на Tilda с пошаговой анимацией. Весь материал в описании. Начинаем с новой страницы. 00:00:36 — Создаём зеро-блок, удаляем стандартный контент. После загрузки материалов можно сразу добавить их в проект. 00:01:09 — Настраиваем цвета, смотрим элементы: лёд, банки с напитком, текстуры. Добавляем текст, делаем крупным и жирным. 00:02:08 — Подгоняем текст под экран, центрируем. Двух строк достаточно. Подготавливаем первый экран с анимацией. 00:03:10 — Отправляем текст на задний план. Все новые элементы будут поверх. Добавляем лёгкий блюр для фона. 00:04:51 — Расставляем лёд и логотип. Логотип немного уменьшаем, чтобы гармонично вписался. Добавляем дополнительный текст. 00:05:50 — Можно использовать любой текст по центру. Рандом Tilda иногда отлично подходит. Уменьшаем текст до двух слов, подгоняем под экран. 00:07:01 — Добавляем свои элементы: перекрашиваем пузырьки под продукт, добавляем фоновые детали без нагромождения. Всё зависит от чувства стиля. 00:07:52 — Рандомно добавляем кубики льда. Элементам можно добавить блюр для глубины. 00:09:51 — Копируем пузырьки, задаём разные размеры и позиции, вращаем по вкусу. 00:10:46 — Выделяем нужные элементы и задаём базовую анимацию: движение при наведении мыши. 00:11:10 — Разные элементы двигаются по-разному, создавая динамичную сцену. 00:11:30 — Минимальное движение носа, проверяем результат — уже неплохо. 00:11:43 — Ставим 100% ширины, чтобы весь контент был виден. Движения минимальные, но плавные. 00:12:43 — Публикуем и проверяем. Далее дорабатываем остальные элементы. Получился аккуратный кубик. 00:13:14 — Элемент не двигается, но это нормально. Настраиваем анимацию подъёма и падения шариков. 00:13:41 — Копируем несколько шаров, слегка поворачиваем и увеличиваем, настраиваем анимацию пошагово. 00:14:10 — Блок работает on-screen. Доводим элемент до верхней позиции — стартовая точка анимации. 00:14:30 — Можно немного изменить движение, ускорить или замедлить шарики. Проверяем общую работу с остальными элементами. 00:16:16 — Настраиваем траектории движения, корректируем позиции, чтобы элементы не были слишком близко. 00:17:10 — Включаем repeat, чтобы анимация повторялась постоянно. 00:17:51 — Прячем лишние элементы, проверяем, публикуем. Всё работает. 00:18:24 — Можно использовать свои материалы или скачанный контент. Ссылки оставлю в Telegram. 00:18:50 — При желании добавляем меню, логотип, описание. На основе цветов и сетки создаём полноценный сайт с примерами продукта. Материал для создания можно забрать у меня в тг канале