Собрать лендинг по готовому макету (Figma) с анимацией бутылки при скролле (секвенция кадров), SEO-плагином и онлайн-оплатой. Движок приоритетно WP, Тильду не рассматриваю.
Основные требования: • Реализация анимации секвенции кадров (плавно, без рывков, с lazy-load и адаптацией под мобайл). • SEO-модуль: Title/Description, ЧПУ, микроразметка schema.org, sitemap, robots.txt, OpenGraph. • Подключение онлайн-оплаты • Полная адаптивность (десктоп, планшет, мобайл). • Google PageSpeed Insights 85+ для мобайла и десктопа. • Чистый код, минимум плагинов, кэширование и оптимизация изображений. • Кроссбраузерность: Chrome, Firefox, Safari, Edge.
Материалы от заказчика: Макет Figma, кадры анимации, тексты, реквизиты, доступы к хостингу/домену, данные для платёжной системы.
Сроки и бюджет: Указать в отклике.
Требования к исполнителю: Портфолио с проектами WP + сложная анимация/скролл, опыт оптимизации Core Web Vitals и интеграции платежей РФ.
Подробно по реализации анимации: Анимация на сайте
Страница состоит из 7 блоков, 5 из которых включают одну анимационную сцену с бутылкой.
Нативный скролл блокируется, а события whell/touch используются как триггер: Скролл вниз — переход на следующий блок и запуск анимации бутылки, соответствующей сцене Скролл вверх — переход на предыдущую сцену и запуск обратной анимации.
Каждая сцена содержит собственную часть сиквенции анимации бутылки (ссылка на видео с анимацией сайта).
Во время воспроизведения анимации скролл блокируется, чтобы избежать прерываний.
Частота кадров анимации: 30 кадров в секунду, easing — easeInOut.
Поддержка мобильных свайпов с аналогичной логикой.
Анимация фона (ссылка на файл с анимацией фона) это готовый .gif файл, который должен запускаться при открытии сайта и работать в зацикленном режиме.
Ссылка на дизайн в фигме: https://www.figma.com/design/FBhG4Cw6uryTCal7itqWTS/F60?node-id=46-3&p=f&t=V9nQ0pgelO9CZtKg-0
