Имиджевый сайт для рекламного агентства 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%, то есть, её начальная точка находится в середине строки, а не в начале.
Результат:
1. Сделали лёгким сайт, который мог бы быть в разы тяжелее, учитывая количество 3d-моделей.
2. Закончили проект на 1,5 месяца раньше, чем планировали. Дедлайн был 6 сентября, акт от клиента получили 29 июля.
3. Превзошли ожидания заказчика.
Задача:
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%, то есть, её начальная точка находится в середине строки, а не в начале.
Результат:
1. Сделали лёгким сайт, который мог бы быть в разы тяжелее, учитывая количество 3d-моделей.
2. Закончили проект на 1,5 месяца раньше, чем планировали. Дедлайн был 6 сентября, акт от клиента получили 29 июля.
3. Превзошли ожидания заказчика.
Источник:
https://blog.sibirix.ru/2019/10/17/jumpica/