Jumpsnack

Jumpsnack

Лендінг бренду кукурудзяних снеків: лінійка смаків каруселлю, склад і переваги, адреса виробника і підписка на новинки. Рух на прокрутці веде від екрана до екрана.

Лендінг
Перший екран лендінгу Jumpsnack

Лендінг бренду снеків

Про проєкт

Jumpsnack випускає кукурудзяні кільця, вафлі та чипси. Продають їх не з сайту, а в роздрібі. Тому в сторінки одне завдання: показати смаки, пояснити склад і довести людину до полиці. Звідси структура: одна сторінка замість каталогу, 7 пунктів меню замість розділів, велика продуктова зйомка замість описів, адреса виробника замість кошика.

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

Рух зібраний на GSAP: заголовки і пачки виїжджають на прокрутці, два біжучі рядки йдуть назустріч одне одному, карусель смаків працює на Swiper, а заголовки розбиті по літерах через Splitting.js, тому довга сторінка тримається як одна анімація, а не як набір блоків. Сайт на WordPress. Тема написана під цей дизайн, тож контент смаків і точок продажу власник править сам, без верстки.

Лендінг Jumpsnack повністю

Використані технології

CMS-ПЛАТФОРМИ

WEB, MOBILE ТЕХНОЛОГІЇ

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

Більше екранів

Перший екран лендінгуБлок про брендВелика типографіка брендуДругий варіант блока про брендПерехід між блоками з кукурудзяними кільцями
Продуктова зйомкаЗаголовок «Лінійка снеків»Картки смаківЧотири смаки лінійки в рядДе купити
Зйомка Big ChipsПереваги продуктуНаведення на пункт списку перевагЕкран із відео про брендПідвал сайту