Задача
Клуб боевых искусств «Белый Барс» работает в Петербурге с 2001 года: Кэмпо, самооборона, ножевой бой, семейные тренировки, общественные проекты. Нужен был сайт, который с первого экрана передаёт характер школы, а не перечисляет секции, и приводит человека на бесплатную первую тренировку.
Что сделали
- Главная устроена как книга в главах: «Пролог», «Клуб», «Направления», «Наставники», «Жизнь зала» и «Эпилог · Запись». Каждая глава — отдельная сцена, которая разворачивается при прокрутке.
- Знак клуба — объёмный 3D-медальон, собранный из векторного логотипа. Он сопровождает посетителя по странице: стоит рядом с сенсеем в прологе, уезжает к краю в главе «Клуб», а затем перелетает в шапку и становится логотипом.
- В прологе на прокрутке сенсей садится в сэйдза — это покадровая анимация на canvas. Кадры грузятся от грубого к точному, поэтому анимация оживает сразу, а потом становится плавной.
- Направления — горизонтальная лента карточек, которая едет по мере прокрутки. Наставники — сенсей с регалиями и лента инструкторов, листается свайпом и стрелками. «Жизнь зала» — фото тренировок сменяются в круглом окне-медальоне.
- Отдельная раскладка анимаций для телефонов. Учтено, что адресная строка мобильного браузера при прокрутке меняет высоту экрана, — знак и анимация не дёргаются.
- Для слабых устройств и настройки «уменьшить движение» — плоские картинки вместо 3D и покадровой анимации. Без WebGL сайт тоже работает.
- Страницы направлений, наставников, история Кэмпо, публикации в СМИ, статьи, галерея и контакты — в той же стилистике.
- Запись — без форм: Telegram, MAX, WhatsApp, телефон и почта, адрес и расписание на каждом экране.
Стек и технологии
- Собственная тема WordPress
- Three.js: 3D-знак клуба из SVG, с фаской и отражениями
- GSAP ScrollTrigger и плавная прокрутка Lenis — сцены, закреплённые на прокрутке
- Покадровая анимация на canvas, кадры в WebP с отдельным облегчённым набором для телефонов
- JavaScript-модули без сборщика, ключевая логика анимаций покрыта тестами
Результат
Сайт рассказывает о школе через образ, а не через перечень услуг: посетитель листает страницу как историю клуба и в конце получает простое приглашение на бесплатную тренировку.
