ELENCHUS · ДЕЛО №004
ИНТЕРАКТИВНЫЙ АДВЕНТ-КАЛЕНДАРЬ
Адвент-календарь для книжного клуба: 14 дней, интерактивные ячейки, подарки, модальные окна, сохранение прогресса и музыкальное сопровождение.
спецпроект
HTML / CSS / JS
интерактив
14 ДНЕЙ
отдельный подарок
на каждый день
на каждый день
100% CODE
без конструктора
и шаблонных блоков
и шаблонных блоков
INTERACTIVE
состояния, модальные окна
и сохранение прогресса
и сохранение прогресса
НЕ ПРОСТО КАЛЕНДАРЬ, А МАЛЕНЬКИЙ ИНТЕРАКТИВНЫЙ ПРОДУКТ
Для книжного клуба нужно было сделать праздничный digital-спецпроект, который пользователь открывает каждый день и получает новый подарок: подборку книг, чек-лист или другой материал.
Проект требовал собственной логики и большого количества состояний интерфейса: разные дни календаря, открытый и закрытый контент, модальные окна, кнопки получения материалов, сохранение прогресса и управление музыкой.
От конструктора отказались — весь интерфейс и механика проекта реализованы на HTML, CSS и JavaScript.
МЕХАНИКА
14 дней, 14 подарков и единый сценарий взаимодействия
ДЕЛО № 004
ИСХОДНАЯ ТОЧКА
КАК ЭТО РАБОТАЕТ
01.
Открыть день
Пользователь выбирает нужную ячейку календаря
02.
Получить контент
Для каждого дня открывается собственное модальное окно с подарком
03.
Забрать материал
Контент можно получить прямо из интерфейса календаря
04.
Сохранить прогресс
Состояние календаря сохраняется на устройстве пользователя
ОТПРАВНАЯ ТОЧКА
От визуальной концепции до рабочей логики
Решение
Реализовали музыкальное сопровождение с возможностью включить или выключить звук
Добавили сохранение пользовательского прогресса на устройстве
Собрали универсальную систему модальных окон для разных типов подарков
Реализовали интерактив каждой ячейки календаря на JavaScript
Полностью сверстали проект на HTML и CSS без готовых блоков и шаблонов
НАПИСАЛИ ЛОГИКУ НА JS
Интерактив календаря реализован без конструктора: открытие дней, работа модальных окон, получение материалов, сохранение прогресса и дополнительные состояния интерфейса.
РАЗРАБОТАЛИ СИСТЕМУ ДНЕЙ
Для каждого дня предусмотрели собственный контент и модальное окно: заголовок, описание, изображение и действие пользователя.
СОБРАЛИ ИНТЕРФЕЙС
Разработали календарную сетку с разными форматами ячеек и состояниями. Несмотря на декоративную стилистику, интерфейс сохраняет понятную механику взаимодействия.
ГОТОВЫЙ СПЕЦПРОЕКТ
01.
Полностью кастомный
Интерфейс и механика реализованы с нуля на HTML, CSS и JavaScript
02.
Интерактивный
Каждый день календаря работает как отдельный пользовательский сценарий
03.
Сохраняет прогресс
Пользователь может возвращаться к календарю и продолжать взаимодействие
стало
ИЗ ИДЕИ В РАБОТАЮЩУЮ МЕХАНИКУ
Адвент-календарь получился самостоятельным digital-продуктом, а не декоративной промостраницей. В одном интерфейсе объединили контент 14 дней, интерактивные состояния, выдачу материалов, сохранение прогресса и музыкальное сопровождение.
Весь проект реализован кодом — от визуальной вёрстки до пользовательской логики на JavaScript.