Добавить галерею с эффектом параллакса в Framer

Добрый день!

Понял задачу: в Framer сделать фото-галерею с плавным параллаксом (без микрофризов) + лайтбокс по клику (оверлей/кнопка/ESC), корректно на мобильных, с ленивой загрузкой, без CLS/layout shift.

Делал scroll-driven анимации в Framer, поэтому сразу закладываю критерии качества, чтобы результат был предсказуем: тест на моб/десктоп, лимит веса изображений, контроль CLS/LCP и поведение лайтбокса без конфликта со скроллом.

Как реализую (коротко):
параллакс только через transform (GPU) + useScroll/useTransform → картинки с фиксированным aspect ratio + ленивые → лайтбокс отдельным компонентом с scroll-lock (без «подрыва» страницы на iOS).

… Definition of Done (приемка):
• параллакс без top/position, только transform
• лайтбокс: оверлей/ESC/кнопка, scroll-lock без скачка, мобильный ок
• изображения: оптимизация + ленивые + без CLS (фиксированное ratio) + короткое видео/скрины теста

2 оффера:
A) «MVP» (галерея+параллакс+базовый лайтбокс, 2–3 брейкпоинта): 2–3 дня / 4 000–7 000 грн
B) «Production» (все выше + prev/next или свайп, расширенный performance-pass, iOS/Android тест): 4–6 дней / 9 000–16 000 грн

Вопросы (3): сколько фото и нужен ли «load more»? сетка — masonry или grid? в лайтбоксе нужны prev/next и свайп?

Показать оригинал

Перевести

Готов реализовать фото-галерею с параллакс-эффектом, которая работает плавно и стабильно как на десктопе, так и на мобильных устройствах, без лагов, микрофризов и сдвига макета.

Что будет реализовано:
Плавный параллакс-эффект, оптимизированный под быстрый скролл
Корректная работа при интенсивном скроллинге
Ленивая загрузка и оптимизация изображений для быстрого загрузки
Полная адаптация под разные размеры экранов
Отсутствие CLS (сдвиг макета)
Popup / Lightbox
… открытие по клику
плавная анимация появления и закрытия
закрытие по клику вне изображения, кнопке и клавише ESC
корректная работа на мобильных без конфликтов со скроллом страницы
Чистая, масштабируемая структура в Framer
Анимации без перегрузки рендера
Оптимизированная логика для стабильного FPS
Аккуратная организация компонентов для дальнейшей поддержки и расширения
После уточнения деталей (количество изображений, примеры референсов, ожидаемое поведение параллакса) смогу быстро озвучить точные сроки и стоимость.

Показать оригинал

Перевести