September 10, 2023

Как это сделано? Разбор логики анимации

Что дано: официальный сайт Apple, страницы товара (AirPods Max – Apple (RU))

Что разбираем: анимация при скролле первого блока

Решение:

Шаг 1. Создаем Zero Block:

Шаг 2. Нажимаем «Редактировать блок», удаляем все элементы (Ctrl + А, DELETE), высоту контейнера ставим значение 900, загружаем изображение (через Add Image) и добавляем текст (Add Text). (Размер текста для «AirPods Max» - 180, SanFranciscoPro, Bold, для нижнего абзаца - 20, SanFranciscoPro, SemiBold):

Шаг 4: Выравниваем элементы по центру блока:

Шаг 5: Выбираем уже добавленный элемент текст («AirPods Max») и добавляем Step-By-Step анимацию (характеристики анимации см в правой части изображений):

Шаг 6: Добавляем анимацию для изображения (увеличение):

Шаг 7: Сохраняем изменения и публикуем:

Готово! Посмотреть, что получилось, можно по ссылке: Разбор анимаций (tilda.ws)

Скачать изображение из примера

Больше полезного материала: https://t.me/tilda_easy