Как сделать анимацию появления товара в карточке? #tilda #zeroblock
1:37

Как сделать анимацию появления товара в карточке? #tilda #zeroblock

Tilda Publishing 12.05.2026 3 407 просмотров 176 лайков

Machine-readable: Markdown · JSON API · Site index

Поделиться Telegram VK Бот
Транскрипт Скачать .md
Анализ с AI
Описание видео
⚡ Показываем, как сделать анимацию появления товара в карточке. Как вам такой приём? Использовали бы в своих проектах?

Оглавление (1 сегментов)

Segment 1 (00:00 - 01:00)

Привет. [фыркает] Сегодня разберём, как создать вот такую анимацию по скролу. Сначала посмотрим на структуру макета. У нас есть главный экран с подложкой, заголовок, описание, кнопка и карточки товаров ниже. Теперь разберём логику анимации. На экране у нас расположены три фигурки: две боковые в профиль и одна центральная. При скроле боковые элементы разщаются в стороны, а центральная фигурка уменьшается и перемещается вниз в карточку товара. Начнём с боковых фигурок. Переходим в настройки степ анимации. Выбираем событие он onsро и ставим триггер по центру окна. Добавляем первый шаг. При прокрутке элемент должен смещаться в сторону. Устанавливаем дистанкселей. Это расстояние скрола, за которое пройдёт движение. Затем смещаем элемент на -230 пикселей по оси Y. Чтобы ускорить процесс, копируем анимацию и применяем её ко второй фигурке. Для изменения направления движения достаточно убрать минус в значении по оси Y. Теперь переходим к центральной фигурке. Выделяем её, добавляем stepп-bystп анимацию с теми же настройками. События onsротригр, центр экрана. Добавляем первый шаг. Дистанция 900 пикселей. Уменьшаем масштаб фигурки и выравниваем её по уровню с боковыми элементами. Проверяем результат. Боковые фигурки разъезжаются, а центральная уменьшается и встаёт с ними в один ряд. Далее добавим второй шаг для центрального элемента. Устанавливаем дистанкселей и перемещаем фигурку вниз в карточку товара. Так создаётся эффект проваливания. Чтобы усилить это, нужно скрыть переход между секциями. Добавляем шейп, растягиваем его на всю ширину арборда и задаём белый цвет. Он перекроет элемент во время скрола. Добавим текст и посмотрим результат. Если хотите увидеть полную версию с дополнительными эффектами, напишите об этом в комментариях.

Другие видео автора — Tilda Publishing

Ctrl+V

Экстракт Знаний в Telegram

Экстракты и дистилляты из лучших YouTube-каналов — сразу после публикации.

Подписаться

Дайджест Экстрактов

Лучшие методички за неделю — каждый понедельник