Vivilen — это инновационный бренд от компании СИБУР, смесь первичного сырья и вторично переработанных полимеров, материал для создания экологичной пищевой и непищевой упаковки.

Процесс

В рамках этого проекта мы выступали разработчиками маркетинговых блоков и лендингов для проекта компании Vivilen СИБУР в коллаборации с креативной командой, работающей на продвижение бренда в онлайн.

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

Механики сайта

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

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

Помимо скроллинга, цикл полностью закрашивается при нажатии на точку между долями окружности.
Справа от окружности на каждом шаге плавно появляется картинка, характеризующая этап переработки пластика. Картинки параллаксируют вправо-влево при взаимодействии с курсором. Весь контент в блоке редактируется в админке сайта.

Разработали лендинг, транслирующий пользователям сайта результаты продвижения бренда.

Анимационные вставки

Лендинг состоит из пяти блоков, каждый из которых имеет анимационные элементы: параллаксы, отрисовывающиеся при прокрутке блоки и элементы, блоки с горизонтальным скроллингом.Работа с данным лендингом заняла у нашей команды настоящий рекорд — несмотря на сложную и объемную задачу, мы выполнили ее за два рабочих дня.

Блок кейсов представляет собой открытый на 180 градусов прокручивающийся набор карточек кейсов. В подложке блока находятся кликабельные кнопки со стрелками, по нажатию на которые, осуществляется бесконечная прокрутка элементов.

Награды

Блок с наградами и достижениями бренда реализован в виде слайдера, который можно пролистать мышкой без дополнительных кнопок, путем перетаскивания вправо-влево. Подобную роль играет навигационный элемент, расположенный внизу под блоком, по клику на который, пользователь может сразу выбрать нужную награду из ряда и просмотреть информацию о ней детальнее.

Стек технологий

Давайте обсудим развитие вашего проекта

Нажимая на кнопку, я соглашаюсь на обработку своих персональных данных

Михаил

Менеджер по подбору решений

Ваши контакты