Демонстрация · 4 приёма

Каталог, который движется.

Прокрутите страницу и попробуйте кнопки. Это работающий пример движения для клиентского Mini App на компьютере и телефоне.

Мягкое движение · без отвлечения

Сила эффекта

Предметы следуют за прокруткой

Объект слегка сдвигается и возвращается с инерцией. Содержимое карточки и цена не двигаются.

Категория

Лёгкий наклон и вертикальный ход

Категория

Небольшая глубина движения

Категория

Сдержанный эффект для плотных объектов

Карточка поддерживает короткий бесшумный ролик с резервной иллюстрацией. В примере видео создаётся прямо в браузере.

Подготовка ролика

На мобильном ролик без звука; если видео не поддерживается, остаётся иллюстрация.

Это самый заметный и безопасный по площади вариант: анимация живёт только в кнопке действия.

Для основных кнопок каталога.

Полупрозрачный силуэт движется под текстом.

Спокойный акцент для подборок и новинок.

Медленный градиент за контентом. Переключатель вверху позволяет сравнить страницу с фоном и без него.

Вариант для оценки

Потом добавил бы инерцию в карточках категорий. Фон всей страницы можно оставить очень тихим, чтобы товары и наличие читались сразу.

Тестовый макет