Задача

Разработать промо-сайт для продвижения депозитной программы «Писанка» от «Ощадбанка».

Реализация

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

Основной задачей стало реализовать визуально простой, но при этом функционально богатый интерфейс. Поскольку сайт предназначался для клиентов банка были жесткие требования к поддерживаемым платформам, нагрузке на процессор и т. д. В связи я создал две реализации: использующую canvas и использующую DOM элементы. Canvas реализация рисует анимированные изображения всех яиц по очереди на одном маленьком холсте а потом копирует их в dataUrl. Как показали эксперименты — это наиболее быстрый вариант для клиентов с ограничениями по используемой памяти. Для сравнения я пробовал варианты с одним большим холстом и большим количеством маленьких. Для того, что бы добиться максимального соответствия шрифтовой части дизайну, только тексты вводимые пользователем выводятся с помощью подгружаемого шрифта, предустановленные же сообщения представляют из себя png анимацию. Во время пасхальных праздников игра приобрела бешеную популярность у молодой ЦА в социальных сетях.

Проект выполнен на технологии HTML5 (Backbone/Marionette).