Автор: Анастасия Свеженцева
В этом проекте вас ждет работа с мягкими анимациями в Tilda: базовой и продвинутой — пошаговой анимацией. Добавляем изображениям анимацию с эффектом параллакса и настраиваем продвинутую триггерную анимацию.
Шаг 1. Знакомство с пошаговой анимацией в Tilda Zero Block, настройка анимации заголовка и фото продукта в первом экране
Изучим принципы пошаговой анимации и инструменты анимации в Tilda Zero Block: тайминги, изинги, изменение координат и свойств элементов при анимации. Соберем анимацию ключевых элементов первого экрана.
Шаг 2. Оркестровка анимации групп объектов с собственной траекторией с помощью таймлайна
Освоим логику работы с таймлайном и выполним настройку запуска анимации для каждого объекта на сцене в соответствующий момент. Настраиваем плавное появление элементов меню и дополнительных элементов навигации.
Шаг 3. Создаем интерактивный шоурил с анимацией по наведению курсора
Настраиваем реакцию на курсор, и реализуем механизм «предпросмотра» портфолио работ студии в виде шоурила. Используем Pointer Events и делаем невидимыми для наведения элементы графики поверх шоурила.
Шаг 4. Анимируем интерактивный каталог
Осваиваем триггерную анимацию Тильды, которая поможет по наведению на один элемент запускать анимацию другого элемента в блоке.
Шаг 5. Анимируем мягкое появление дизайнерских коллекций при cкролле блока
Продолжаем практику в работе с таймлайном и оркестровкой связанных анимаций. Знакомимся с быстрым способом настройки одинаковых анимаций для схожих композиций.
Шаг 6. Создадим параллакс-эффект при скролле в блоке с цитатой
Создадим воздушное и многослойное пространство на экране. Познакомимся еще с одним видом анимации в Tilda Zero Block базовую анимацию – эффекта параллакс для фотографий.
Шаг 7. Настроим сборку дизайн-концепции комнаты при скролле (коллаж)
C помощью пошаговой анимации, сделаем так, чтобы по скроллу предметы интерьера складывались с коллаж комнаты с декором. Зафиксируем при скролле тексты с помощью базовой анимации Fixing.
Шаг 8. Анимируем эффектную заставку, открывающую первый экран сайта
Создадим эффектное появление логотипа и смену фона заставки. Настроим появление заголовка с эффектом маски. Настроим плавный переход от сцены с анимацией заставки к сцене анимации первого экрана.
Было полезно? Ставь лайк
#tilda #webdesign #вебдизайн #тильда #разработкавеб-сайтов
