О проекте
Совместно с дизайнером сделали лендинг для русского фотографа, живущего в США: видеозаставка, 360-панорама, галерея «до/после» и аккуратные анимации без потерь в скорости. Вёрстка по готовому PSD дизайну.
Что сделал
- Прелоадер и лёгкие CSS-анимации (включая «летающий» дрон на первом экране).
- Видеофон на промо-экране + модальное окно с полноценным клипом.
- 360°-панорама через Photo Sphere Viewer с отложенной загрузкой и рендером после первых экранов.ч
- Галерея «до/после» с перетаскиванием ползунка.ч
- Слайдеры на Swiper, адаптивная сетка, формы обратной связи.
Зачем так
Тяжёлые скрипты (360-панорама) подключены «по требованию», чтобы интерфейс не зависал и не тормозил прокрутку; медиаблоки и анимации — только там, где усиливают историю и не мешают читабельности.
Итог
Живой промо-лендинг с акцентом на визуал: быстрый старт, плавная прокрутка и понятная подача портфолио на десктопе и мобильных.
Как бы сделал сейчас
Без фреймворков: семантический HTML, современный CSS, критический CSS инлайн и WebP изображения. Динамические блоки — через lazy-import модулей по IntersectionObserver; 360-панораму и видео инициализировал бы только по видимости/действию пользователя.
