Задача
Гостю нужно почувствовать масштаб курорта, выбрать сезон и категорию номера и понять, чем заняться на территории. Курорту нужно выглядеть дорого и спокойно, без перегрузки.
LITORA
О проекте
Сайт большого курорта LITORA на Чёрном море в Сочи: номера, бассейны, SPA, рестораны и бары, пляж, гольф и программы отдыха. Отель, цены, программы и контакты вымышлены, это демонстрационный проект.
Подход
Сайт открывается большой фотографией бассейна с переключателем «лето и зима». Дальше сцены прокрутки сменяют друг друга: номера, бассейны, рестораны. Территорию можно изучить на интерактивной карте.
Что получилось
Сайт из 52 страниц на русском и английском: главная, каталог номеров, бассейны, SPA и wellness, рестораны и бары, пляж и гольф, впечатления, предложения, галерея, журнал, бронирование и контакты.
Подробнее о проекте
На первом экране название отеля рукописным шрифтом поверх фотографии бассейна и слоган «Море ближе. Время медленнее». Переключатель сезона меняет настроение сайта между летним и зимним, для этого сделаны два шестисекундных ролика.
Ниже идут сцены с прокруткой и плавные галереи: шесть категорий номеров, пять бассейнов, восемь термальных пространств, три ресторана, четыре бара. Территорию курорта показывает интерактивная карта, от западного сада до концертной сцены и двух пирсов.
Бронирование и подписка демонстрационные: заявки, данные гостей и платежи никуда не отправляются. Поддерживается режим уменьшенного движения.
Как мы собирали
- 01
Основа
Обычные HTML, CSS и модули JavaScript, серверная база данных не нужна. 52 страницы собирает скрипт build.mjs. Сценами прокрутки управляет ScrollCraft, смену кадров делает Web Animations API.
- 02
Материалы
202 фотографии и два шестисекундных сезонных ролика созданы для проекта генеративными моделями. Шрифты локальные, изображения оптимизированы.
- 03
Проверка
Логику проверяют тесты Node, поведение — Playwright на настольном и мобильном экранах, в том числе под вложенным адресом. Режим «уменьшить движение» поддерживается.
- 04
Демонстрация
Отель вымышлен. Бронирование и подписка демонстрационные: заявки, данные гостей и платежи никуда не отправляются.
