Главная как фильм
Прокрутка не листает страницу, а переключает сцены: экран закрепляется, внутри меняются фото, подписи и номер предложения. Каждая сцена доходит до законченного кадра, а не останавливается на полпути.
LOTi: сайт премиального туроператора, который показывает отдых как кино, а не как список туровLOTi
Главная · сцены при прокрутке01 / 04
Задача
LOTi продаёт премиальный отдых: Мальдивы, Турция, ОАЭ, Таиланд, Сейшелы, Италия, перелёты на собственном бизнес-джете Lujo BlackJet и трансферы на Maybach. Обычный каталог туров здесь не работает: клиент выбирает не цену, а впечатление. Нужен был сайт, который передаёт это настроение с первого экрана и при этом остаётся рабочим инструментом для клиентов и турагентств: отели, направления, где купить.
Решение
Главная устроена как короткий фильм, которым управляет прокрутка. Пять сцен сменяют друг друга: подборка предложений, логотип, который превращается в окно в мир, барабан направлений, премиум-отели. Каждая сцена докручивается до законченного кадра, поэтому на полпути ничего не застревает. Глубже — рабочие разделы: каталог отелей с фильтром, страницы стран, карта партнёров и вход для агентов.
Сроки
3 недели
Стек
- Angular
- GSAP ScrollTrigger
- Swiper
- Bootstrap
- Яндекс.Карты
Результат
Сайт на русском и английском: пять анимированных сцен на главной, 9 направлений, 1138 отелей в каталоге и карта, где найти агентство рядом с домом.
Главные фишки
Логотип становится окном
В букве «O» — маленькое видео. При прокрутке оно растёт на весь экран, и по нему проезжает строка «Почувствуйте ритм мира с LOTi». Бренд запоминается раньше, чем человек дочитает первый абзац.
Кнопка следует за курсором
Круглые «Подробнее» и «Отели» плавно догоняют мышь, поэтому нажать можно в любой точке большого фото. На телефоне это обычные кнопки.
Где купить
На карте — 31 агентство-партнёр, рядом список с раскрывающимися контактами. Клиент находит офис рядом с домом, а агентства получают продажи с сайта туроператора.
1138отелей в каталоге с фильтром
9направлений: от Мальдив до Африки
5сцен на главной, которыми управляет прокрутка
Сделаю похожий проект для вас – сам, от макета до запуска
Ключевые экраны
01Цель: настроение с первой секунды
Загрузка и подборка предложений
Пока сайт грузится, самолёт летит по линии под логотипом. Потом открывается видео и заголовок «Премиум-туры для нового взгляда на отдых».
- 1Дальше экран закрепляется, и прокрутка шторкой открывает подборку из четырёх предложений.
- 2Lujo BlackJet, трансфер, Стамбул, Мальдивы: вместе с фото меняются подпись и номер справа.
02Цель: запомниться
Логотип — окно в мир
Огромное «LOTi», в букве «O» маленькое окно с видео. Окно растёт на весь экран, по нему проезжает «Почувствуйте ритм мира с LOTi».
- 1После видео выезжает главная мысль: «каждое путешествие — путь к переосмыслению себя».
03Цель: выбрать страну
Направления
Названия стран крутятся вертикально, как барабан: текущее крупно, соседние уменьшаются и бледнеют.
- 1Фото страны въезжает снизу, номер направления меняется от 01 до 06.
- 2Чёрный круг «Подробнее» следует за курсором и ведёт на страницу страны.
04Цель: перейти в каталог
Сервисы, отели, контакты
Премиум-сервисы, новости и видео отелей на весь экран. Видео растёт из маленького окна, заголовки съезжаются с двух сторон.
- 1Белый круг «Отели» ведёт в каталог из любой точки видео.
- 2В подвале бегущая строка LOTi, телефоны, WhatsApp, Telegram и все направления.
До и после
Потяните ползунок
Сайта не было
«Своего сайта не было. Туры продавали агентства-партнёры и система онлайн-бронирования, новости выходили в соцсетях. Показать сам бренд и его премиальные сервисы было негде.»
со слов клиента- Агентства-партнёры
- Онлайн-бронирование
- Соцсети
Нужен похожий проект?
Расскажите о задаче, и я предложу решение и сроки.