Ни одного «ну, исторически так сложилось»
- На сайте с
- 2026 года
- Юридический статус
- Самозанятый
Задача стояла сделать не просто статичную страницу с адресом и датой, а интерактивную историю, которая погрузит гостей в атмосферу праздника еще до его начала.
Сценарий состоял из трех блоков:
1. Стартовый экран с золотым билетом в духе шоколадной фабрики Вонки. Чтобы войти на сайт, гость должен потянуть билет вниз за край и разорвать его пополам.
2. Основная дневная часть в стиле Dior (Toile de Jouy) в сине-белой гамме с золотыми деталями. Здесь расположены программа церемонии, календарь, дресс-код и карта проезда к замку Castello Di Bellagio.
3. Ночной блок (After Party) с переходом в винтажную цирковую тему (красно-бежевый шатер, звездное небо) для вечеринки в Pirom Garden, контактов и анкеты гостя
Я выбрал Vue 3 (Composition API) и сборщик Vite, чтобы приложение получилось легким и быстро загружалось на мобильных телефонах.
Что было сделано:
1. Интерактивный билет. Спроектировал SVG-маску с зигзагообразным разрезом, которая делит изображение билета на две части. Написал обработчики жестов и движений мыши. Когда гость тянет билет вниз, половинки расходятся. При достижении нужной точки срабатывает анимация разрыва, приветственный экран исчезает, и страница разблокируется для скролла.
2. Анимация. С помощью библиотеки GSAP и плагина ScrollTrigger привязал движение элементов к прокрутке страницы. Астролябия вращается по мере скролла, слои облаков плывут в разные стороны с разной скоростью, а фигуры двух лебедей съезжаются и образуют силуэт сердца.
3. Календарь. Сверстал календарную сетку на ноябрь 2026 года. При прокрутке к ней запускается анимация рисования SVG-линии, которая обводит дату 11 ноября в форме сердца.
4. Верстка и оптимизация. Оптимизировал изображения под мобильные экраны, так как большинство гостей открывают приглашение с телефонов. Стили написал на чистом CSS с использованием переменных для удобного переключения шрифтов Forum, Cormorant Garamond и Montserrat.
5. Анкета. Реализовал форму обратной связи, где гости отмечают свое присутствие, выбирают напитки и еду.
Сайт работает со скоростью 60 кадров в секунду на смартфонах и компьютерах.
Итоги работы:
- Интерактивный разрыв билета на старте удивил гостей, они активно делились эмоциями и отправляли молодоженам скриншоты.
- Анкета избавила пару от необходимости вручную обзванивать каждого гостя. Все данные по присутствию и меню собрались в одном месте.
- Разделение дизайна на строгий дневной Dior и неформальный цирковой Circus помогло гостям понять формат мероприятия и подготовить правильные костюмы в стиле total black.
