Комментарии
Говорят, выше головы не прыгнешь. Но это говорят те, кто не делал сайт для Jumpica
Результат Процесс
Jumpica
Сибирикс
Jumpica
Говорят, выше головы не прыгнешь.
Но это говорят те, кто не делал сайт для Jumpica
Если вы когда-нибудь катались на ватрушках Газфонда, кутались в пледы МТС или пили чай из кружек РЕН ТВ, знайте, что все эти классные штуки заказаны в Jumpica. Jumpica — это рекламное агентство, которое работает со многими известными брендами и делает для них крутую сувенирку, текстиль, полиграфию и POSM. Ребята накопили много креативных кейсов и решили обновить сайт, чтобы он соответствовал уровню и стилю их работ.
Задача:
Cоздать имиджевый корпоративный сайт для рекламного агентства Jumpica
На первом этапе работы мы сделали заглушку для старого сайта, чтобы не отпугнуть пользователей во время технических работ и заодно анонсировать будущий ресурс. Заказчик хотел, чтобы это было изображение строящегося логотипа Jumpica и надпись «Сайт на реконструкции». Наш дизайнер усовершенствовал эту концепцию — отрисовал в 3d каркас логотипа, который обшивается цветными деталями.
Концепцию утвердили в виде статичного изображения, но я заморочился и дома попробовал сделать из него анимацию. Идея была такая: сперва обшивка логотипа разлетается, а потом снова собирается по деталям на каркас. Поковырялся, поковырялся — получилось симпатично. На следующий день показал артдиректору и менеджеру, все такие: «О, прикольно! Давай делать». В общем, я собрал гифку, отрисовал саму заглушку и мы разместили эту анимацию.

Глеб
Дизайнер
Заглушка задала тон будущему сайту. Во время брейншторма по дизайну все сошлись на том, что фишкой проекта станут такие же анимированные 3d-фигуры с оптическими иллюзиями. И понеслась.
3d-анимации
Каждая анимация — это не дорогущая тяжелейшая 3d-модель, а множество png. Порядка 120 штук. Все они загружены на сайт. Все скрыты, кроме первой. При наведении курсора на 3d анимацию, png-картинки покадрово переключаются, и фигура вращается. Если бы мы делали обычные 3d-модели, сайт был бы в разы тяжелее, а разработка обошлась бы заказчику значительно дороже. Мы же подобрали оптимальную технологию для выполнения задачи и на выходе не только получили легкий сайт (оцените, насколько быстро загружается главная страница), но и сэкономили бюджет заказчика.
Скролл
В блоке «Процесс работы» ход оказания услуг разбит на 10 шагов. Когда пользователь скроллит экран, эти десять шагов один за другим меняют цвет с серого на оранжевый.

Каждая цифра здесь — это png, к которой применен фильтр. Когда экран проскроллен до определенного значения, фильтр отключается (все значения проставлены в хэш-таблице). Так и происходит смена цвета.

Сама линия — это 2 svg-картинки: одна серая, другая оранжевая. Оранжевая расположена поверх серой. У svg есть атрибут path («путь» рисования линии) и свойство stroke-dashoffset (смещение изображения). Это свойство и меняет цвет линии, в зависимости от того, насколько пройден «путь».
Состояние hover
Состояние hover — это состояние ссылки при наведении на неё курсором. Оно дает нам понять, что мы нацелились на ссылку и ссылка готова к клику. Мы искали нестандартные динамичные решения для состояния hover на сайте и придумали несколько интересных вариантов.


В блоке с услугами

Блок с услугами состоит из четырех частей: Полиграфия, POS материалы, Текстиль, Сувениры. Все части — одного размера. Точно такого же размера мы сделали отдельный элемент — оранжевую плашку. Она всегда находится в блоке с услугами и преследует курсор. Наводишь курсор на одну из четырех частей блока — сразу же рассчитываются координаты её левого нижнего угла и плашка встает в это положение.
В блоке «Что входит в услугу»

В блоке «Что входит в услугу» каждая ссылка, при наведении на неё курсором, сразу с двух сторон подчеркивается оранжевым пунктиром, который сходится в центре. На самом деле, здесь две линии: одна — оранжевый пунктир, другая — белая. Белая располагается поверх оранжевого пунктира и сливается с фоном. Изначально, ширина обеих линий — 100%, поэтому мы видим белую и не видим пунктир. При наведении на строку курсором, ширина белой линии становится 0%. Но она не разом исчезает, а исчезает с двух сторон по направлению в центр строки. Нам кажется, что анимирована оранжевая линия, а, на самом деле, анимирована белая. У неё сделано смещение по координате X на 50%, то есть, её начальная точка находится в середине строки, а не в начале.

Если раз десять подряд сказать слово Jumpica и смотреть при этом на их фирменный оранжевый цвет, возникают ассоциации с прыжками, баскетбольным мячом, динамикой, скоростью, молодостью. Мы прониклись этой атмосферой и постарались передать её через сайт, так что прыгая от одной анимации к другой, от страницы к странице, изловчились и прыгнули выше головы. Трижды. Смотрите сами.

  1. Сделали лёгким сайт, который мог бы быть в разы тяжелее, учитывая количество 3d-моделей.
  2. Закончили проект на 1,5 месяца раньше, чем планировали. Дедлайн был 6 сентября, по факту, акт от клиента получили 29 июля.
  3. Превзошли ожидания заказчика.
Я пришел в эту профессию, чтобы создавать что-то прекрасное, то, чем я мог бы гордиться. Проект для Jumpica — идеальный пример реализации этой цели. После его окончания меня не покидает чувство гордости и удовлетворения. Мы всей командой до сих пор по 20−30 минут в день просто залипаем в то, как плавно и красиво всё на сайте движется :). Когда была презентация сайта, я минут 20 рассказывал заказчику про все, что мы сделали, показывал страницы. Она слушала, слушала, слушала, а потом сказала: «Ой, Антон! Я сдерживала эмоции, только для того, чтобы вас не перебивать». Круто такое слышать!

Антон
Менеджер проекта
Отзыв клиента
Итоговый проект