Сайт

Лендинг для ООО «ФармТранс»

Корпоративный лендинг фармацевтической логистики: scroll-driven hero, форма заявки, оптимизация под mobile LTE.

Видео

Демонстрация сайта с прокруткой hero и виджетов телеметрии

Описание

Лендинг фармацевтической логистической компании «ФармТранс»: vanilla HTML/CSS/JS, GSAP scroll-scrub hero с интерактивными виджетами телеметрии на desktop, progressive video loading на mobile, форма заявки с маской телефона и автокомплитом городов. Сайт оптимизирован под медленный мобильный интернет: self-hosted assets, ленивая загрузка данных, отдельные медиа-стратегии для desktop и mobile.

Что сделано

Стек

HTML5, CSS3 (custom properties, clamp(), media queries, glassmorphism)
Vanilla JavaScript — без React и Vue
GSAP 3 + ScrollTrigger — анимации на desktop
Lucide (self-hosted), JSON (~78 KB) для автокомплита городов
MP4 (scroll-scrub + mobile), WebP cover
Статический деплой без бэкенда и сборщика

Hero и scroll-experience

Видео привязано к скроллу (scroll-scrub через GSAP ScrollTrigger + pin)
Четыре glassmorphism-виджета в реальном времени: температура в кузове и снаружи, маршрут Москва → Екатеринбург, статус груза и контрольные точки
Симуляция суточного цикла: день → ночь → утро, смена иконок солнце/луна
Плавный fade hero при выходе из секции

Два разных hero под устройство

Desktop (≥740px): cinematic scroll-experience с видео ~15 MB (keyframe scrub)
Mobile: лёгкий cover 36 KB сразу, затем progressive enhancement — видео 665 KB подгружается в фоне и заменяет cover без блокировки LCP

Производительность

Self-hosted vendor-скрипты без CDN — важно для РФ и мобильного LTE
GSAP грузится только на desktop
geo-dataset.json — ленивая загрузка при фокусе на поле города
Preload + fetchpriority="high" для LCP-картинки на mobile

UX и форма

Маска телефона +7 с валидацией
Автокомплит «Откуда / Куда» по базе городов России (дубликаты с регионом в скобках)
Копирование телефона и email в мобильном меню с анимацией check
Scroll reveal секций, sticky header, FAB «Позвонить» на mobile

Адаптив

Три брейкпоинта: mobile / tablet (2 виджета) / desktop (4 виджета)
Отдельные видеоисточники и логика hero под viewport
matchMedia + обработка resize/orientation без поломки состояния

Стек

HTML5CSS3JavaScriptGSAPScrollTriggerLucide

Ссылки

pharm-trans.ru

Есть задача по боту, сайту или веб-приложению?

Свяжитесь любым удобным для вас способом