+7 (812) 979-49-49 Написать в Telegram

Сайты и продвижение

ПРОМАРКО — сайт производства торгового оборудования

Корпоративный сайт петербургского производства торгового оборудования, мебели и металлоизделий. Главный экран показывает, как изделие проходит путь от чертежа до готового вида, — прямо на прокрутке страницы.

  • Своя тема WP
  • Scroll-видео
  • Vanilla JS

ПРОМАРКО — корпоративный сайт, где изделие собирается на прокрутке

Производству торгового оборудования нужен был сайт, который с первого экрана объясняет главное преимущество компании — полный цикл «от чертежа до монтажа». Текстом это звучит как у всех, поэтому процесс решили показать, а не рассказать. При этом сайт должен был остаться лёгким: тяжёлый конструктор страниц и десятки библиотек убили бы скорость на телефонах.

Что сделали

  • Главный экран с анимацией на прокрутке. На компьютере прокрутка напрямую управляет кадром видео: изделие проходит фазы «Чертёж → Каркас → Отделка → Готово», подписи фаз переключаются синхронно, затем камера въезжает в готовый объект и проявляется бренд.
  • Три режима одного героя. На компьютере с мышью — управление прокруткой. На телефонах и планшетах — автовоспроизведение отдельного облегчённого ролика. При системной настройке «уменьшить движение» и на низких экранах — статичный финальный кадр. Для тех, кто не хочет смотреть, есть кнопка «Пропустить анимацию».
  • Первый экран появляется сразу, без ожидания видео: браузер в первую очередь грузит финальный кадр (fetchpriority=high), а у ролика запрашиваются только метаданные.
  • Собственная тема без конструктора страниц. Стили разделены по шаблонам — главная, внутренние страницы, портфолио, — и каждая страница грузит только своё.
  • Посадочные страницы направлений: торговое оборудование, металлообработка, перфорация и аксессуары, выставочные стойки, озеленение, мягкая мебель. У каждой — свои виды работ, материалы и призыв оставить заявку.
  • Портфолио с фильтром по направлениям: «Мебель и ресепшн», «Озеленение», «Торговое оборудование».
  • Своя форма заявки без плагинов форм: защита nonce, скрытое поле-ловушка для ботов и проверка «телефон или e-mail» — клиенту достаточно оставить один способ связи.
  • Согласие на cookie по 152-ФЗ через наш плагин Cookie Consent Mascot в строгом нейтральном оформлении: аналитика не запускается до нажатия «Разрешаю».

Стек и технологии

Фронтенд

  • Vanilla JavaScript без jQuery и сторонних библиотек — на главной всего три скрипта
  • Привязка currentTime видео к прокрутке через requestAnimationFrame
  • CSS custom properties (—progress, —veil, —brand): хореография героя живёт в CSS
  • matchMedia по типу указателя, prefers-reduced-motion и высоте экрана — выбор режима анимации
  • Отдельные ролики для компьютера и телефона, постер как LCP-элемент

WordPress и PHP

  • Собственная тема promarko-clean без конструктора страниц
  • PHP 8.5 и актуальный WordPress
  • Раздельные стили по шаблонам: главная, внутренние страницы, портфолио
  • Своя форма заявки: nonce, honeypot, серверная валидация
  • Изображения в WebP, ленивая загрузка всего, что ниже первого экрана

Контент и дизайн

  • Структура «направление → виды работ» для каждой услуги
  • Портфолио с фильтром по категориям
  • Палитра из материалов самих изделий: глубокий зелёный металл, светлое дерево, камень
  • Ролик-визуализация: чертёж, каркас, отделка и финальный кадр в одной сцене
  • Cookie Consent Mascot — согласие по 152-ФЗ до запуска аналитики

Результат

Главный экран объясняет полный цикл производства без единого абзаца текста: посетитель сам «прокручивает» изделие от чертежа до готового объекта. При этом на главную уходят всего три скрипта и ни одной сторонней библиотеки.

Бесплатная консультация

Позвольте нам помочь в развитии вашего бизнеса
Напишите в Telegram @zanuda или на почту zanuda@zanuda.infoВ Telegram сразу ответит наш ИИ-ассистент, а сложные вопросы он передаст нам.
Портфолио

Другие работы

Все работы
Сайты и продвижение

Антон Вуйма

Редизайн сайта PR-стратега и автора книги «Чёрный PR»: из информационного портала старой школы — в редакционный сайт с кейсами-«досье», публикациями и книгами.

  • Редизайн
  • WordPress
  • Редакционный дизайн
Сайты и продвижение

Белый Барс

Сайт петербургского клуба боевых искусств: главная как книга в главах, 3D-медальон клуба и сенсей, который садится в сэйдза на прокрутке.

  • Своя тема WP
  • Three.js
  • GSAP
  • Scroll-анимация
Сайты и продвижение

Автоломбард 24

Сайт автоломбарда: каталог услуг, формы связи и вывод в топ поиска.

  • CMS
  • Адаптив
  • SEO
Следующий кадр за вами

Расскажите задачу. Предложим решение, сроки и стоимость.

Быстрее всего — в Telegram: сразу ответит ИИ-ассистент, а в рабочее время подключимся мы.

Telegram · ответит ИИ@zanuda
Телефон+7 (812) 979-49-49
ОфисСанкт-Петербург, Уткин пр., 11 к. 2, офис 108
Написать в Telegram