Jumpsnack

Jumpsnack

Лендинг бренда кукурузных снеков: линейка вкусов каруселью, состав и преимущества, адрес производителя и подписка на новинки. Движение на прокрутке ведёт от экрана к экрану.

Лендинг
Первый экран лендинга Jumpsnack

Лендинг бренда снеков

Про проект

Jumpsnack выпускает кукурузные кольца, вафли и чипсы. Продают их не с сайта, а в рознице. Поэтому у страницы одна задача: показать вкусы, объяснить состав и довести человека до полки. Отсюда структура: одна страница вместо каталога, 7 пунктов меню вместо разделов, крупная продуктовая съёмка вместо описаний, адрес производителя вместо корзины.

Вкусов четыре: том-ям, рёбрышки барбекю, сметана с зеленью, четыре сыра. Каждая пачка на 100 г и живёт на своём цвете, поэтому карусель читается как полка, а не как список. Ниже блок про бренд и 5 строк с составом: без пальмового масла, из кукурузы, без обжаривания, свои вкусы, формат to go. Подписка на новинки стоит в подвале.

Движение собрано на GSAP: заголовки и пачки въезжают на прокрутке, две бегущие строки идут навстречу друг другу, карусель вкусов работает на Swiper, а заголовки разбиты по буквам через Splitting.js, поэтому длинная страница держится как одна анимация, а не как набор блоков. Сайт на WordPress. Тема написана под этот дизайн, так что контент вкусов и точек продажи владелец правит сам, без вёрстки.

Лендинг Jumpsnack целиком

Используемые технологии

CMS-ПЛАТФОРМЫ

WEB, MOBILE ТЕХНОЛОГИИ

  • JavaScript
  • jQuery
  • GSAP
  • Swiper
Первый экран лендинга с пачкой снековПродуктовая съёмка снековБлок «Где купить» с адресом производителяПодвал с меню и подпиской
Блок «Про наш бренд»Линейка вкусов карусельюСписок преимуществ продуктаФинальный экран с кнопкой видео
Главный экран на телефонеПачки снеков на телефонеБлок о брендеОписание вкуса на телефонеЗаголовок «Линейка снеков»Карточка вкуса на телефонеГде купитьПреимущества продуктаПодвал сайтаМобильное меню

Больше экранов

Первый экран лендингаБлок о брендеКрупная типографика брендаВторой вариант блока о брендеПереход между блоками с кукурузными кольцами
Продуктовая съёмкаЗаголовок «Линейка снеков»Карточки вкусовЧетыре вкуса линейки в рядГде купить
Съёмка Big ChipsПреимущества продуктаНаведение на пункт списка преимуществЭкран с видео о брендеПодвал сайта