Концепт сайта для кофейни с донатами — Delorean
Трёхмерный донат по прокрутке покрывается глазурью и посыпкой, а потом вместе с пятью другими укладывается в коробку.
Запись прокрутки сайта от первого экрана до подвала, 0:46. Вживую сайт отвечает на прокрутку и курсор — откройте живую версию.
Что это за сайт
Одностраничный сайт кофейни с американскими донатами в стиле 50–60-х. Первая половина страницы — 3D-история одного доната: четыре вкуса из витрины, глазурь, посыпка и коробка на шесть штук с итоговой ценой. Дальше идут витрина с фотографиями, концепция «машины времени», три шага на карточках, которые ложатся стопкой при прокрутке, меню к кофе и ответы на вопросы. Кнопка «Заказать» стоит в шапке и в нескольких главах и открывает окно с предзаказом в Telegram и доставкой через Яндекс Еду.
Оформление
Гамма витрины с глазурью: розовый, голубой, лимонно-жёлтый и мятный сменяют друг друга по главам, их уравновешивают глубокий бирюзовый и кремовый, акцент — коралловый. В заголовках тонкая строка соседствует с жирной: выделенные слова набраны Rubik ExtraBold в цвет главы или белым с тёмной тенью, основной текст — Onest. Донаты в истории и коробка нарисованы в 3D прямо в браузере, на витрине и в меню — предметные фото донатов кофейни, а кнопки при нажатии разбрасывают посыпку.
Кому подойдёт такой подход
- Кофейни, пончиковые и кондитерские с яркой витриной
- Пекарни и десертные бренды, которые продают наборы и коробки с собой
- Кафе, которые принимают предзаказы в мессенджерах и возят через агрегаторы доставки
Что внутри
Первый экран с 3D-донатом
Малиновый донат в глазури висит рядом с заголовком «Донаты и кофе из 50-х», его можно повернуть мышью. Сверху сыплется посыпка: отскакивает от доната и копится внизу экрана, курсор её расталкивает, а клик подбрасывает в воздух.
Вкусы, глазурь и посыпка
Сцена закрепляется: четыре вкуса проезжают каруселью, и под каждым фон перекрашивается в свой цвет. Затем донат остаётся голым тестом, струя малиновой глазури покрывает его до края, а в следующей главе на него падает посыпка.
Коробка собирается на глазах
Розовая 3D-коробка выезжает снизу, выбранный донат прыгает в ячейку, остальные прилетают сверху, а список рядом отмечает каждый с ценой и считает, сколько уже внутри. Крышка закрывается, коробка поворачивается, и появляется итог за шесть штук с кнопкой заказа.
Витрина и меню
Четыре доната на предметных фото: строка в списке меняет снимок, цвет карточки, описание, цену и вес, а «Рассмотреть» открывает крупный план с приближением. В меню к кофе за курсором над строкой следует фотография доната или напитка.
Финал с горой донатов
В главе «Назад к донатам» донаты падают на дно экрана, подпрыгивают и раскатываются, а любой можно схватить и бросить. Рядом — адрес, часы работы и кнопка заказа со ссылками на Telegram и Яндекс Еду.
