Интерактивная новогодняя открытка

Пришёл интересный заказ от сотрудника юридической компании. Разработать открытку на Новый год, с которой адресат сможет взаимодействовать.

Просили сделать, чтобы во время наряжания, ёлка откликалась зажиганием огоньков (по одному), а когда все игрушки на местах, ёлка должна засиять и появляется надпись.

ilex-ny.png

Дизайн ёлки и набор игрушек предоставлены заказчиком. К сожалению, почти все игрушки пришлось дорабатывать вручную, убирая лишние детали (из-за большого числа элементов, svg файлы были слишком тяжёлыми и медленно загружались) и тени (т.к. они должны быть динамичными).

За основу интерактива был взят Open Source движок Konva (https://konvajs.github.io/). Ёлку пришлось разбирать по координатам, чтоб высчитать точки привязки огоньков к контурам и чтоб была возможность масштабировать её под разную ширину экранов. Разработка мобильной версии (вертикальной) не велась, т.к. выходила за рамки согласованных сроков и нашего бюджета.

В процессе разработки открытка получила дополнительные функции. Я нашёл и адаптировал наиболее натуральный алгоритм движения снежинок, чтобы добавить снег. Появилась привязка игрушек к "своим" местам, т.к. тесты на фокус-группе показали, что без "магнитной" привязки занятие становится утомительным.

5c1b62204bd14196430214.gif

Посмотреть на готовый результат можно на коротком видео (25 секунд) или потрогать вживую (если вы с ПК): https://rizhenkov.by/demo/ilex-ny/