Записывайтесь на бесплатный онлайн-интенсив «Верстка для дизайнеров и фрилансеров» в 19:00 мск
Записаться
Вернуться к продуктам
Кратко о видео
В уроке показан полный процесс создания сайта Labubix в Taptop: анализ макета в Figma, подготовка материалов, создание структуры проекта, настройка стилей, вёрстка основных секций и добавление сложных анимаций по скроллу.
Главный акцент урока — не только на сборке отдельных блоков, а на подходе к созданию полноценного проекта: от планирования структуры до последовательной настройки интерактивных эффектов. Разбирается, как организовать работу так, чтобы сложная вёрстка и анимации оставались управляемыми.
Урок подойдёт тем, кто уже знаком с базовой вёрсткой в Taptop и хочет пройти полный цикл создания коммерческого сайта с нуля — от макета до готового интерактивного проекта.
Как сверстать сайт Labubix с анимациями
Красивый макет с анимациями — это только начало. При создании сложного сайта важно правильно продумать структуру, подготовить стили и организовать работу так, чтобы верстка оставалась понятной, а анимации не ломали проект.
В этом уроке на примере сайта Labubix разберем полный процесс разработки в Taptop: от анализа макета и подготовки материалов до верстки секций и настройки сложных анимаций по скроллу.
После урока у тебя будет готовый проект и понимание, как подходить к созданию сложных сайтов — от первого шага до финального результата.
В этом уроке Вадим покажет полный процесс создания сайта Labubix в Taptop — от разбора макета в Figma и подготовки материалов до верстки секций и настройки сложных анимаций.
Вы узнаете, как продумать структуру проекта, организовать стили и последовательно собрать полноценный сайт с нуля. В конце урока настроите интерактивные эффекты по скроллу и получите опыт разработки сложного проекта в Taptop.
Тайминги видео
00:00 — Добавление анимации по скроллу
01:40 — Общая логика анимации и ключевых кадров
02:25 — Распределение анимации по слайдам
03:31 — Настройка эффектов для изображения
05:12 — Масштабирование изображения
06:57 — Настройка точки трансформации
07:35 — Движение изображения
08:41 — Сглаживание анимации
09:20 — Анимация заголовка
10:27 — Масштабирование, движение и прозрачность текста
12:15 — Анимация изображения на следующих слайдах
14:02 — Настройка масштабирования и движения
16:00 — Финальное движение изображения
17:47 — Настройка поворота, движения и масштабирования
19:55 — Анимация описания
21:45 — Итог: начало и конец анимации
