Інтерактивні банери

Перший екран, який хочеться торкнутися

Шість живих банерів для головної сторінки сайту. Наведіть курсор, клацніть або проведіть пальцем — кожен реагує по-своєму. Усі зроблені без важких бібліотек, і анімація працює лише тоді, коли банер на екрані.

У вашій системі ввімкнено «менше руху», тому банери показані без анімації.

Сьомий — «Око» на головній цього сайтуОко стежить за курсором, а слова навколо підказують, що я бачу в чужому проєкті.
Подивитися →

Частинки, що складаються в слово

Кілька тисяч точок збираються в слово, тікають від курсора й повертаються на місце. Клік розкидає їх і складає наступне слово. Замість слів можна взяти логотип.

  • Для когостудіїtech-продуктизапуски
  • ТехнологіяCanvas 2D, без бібліотек
  • На телефоніреагує на дотик

Рідкий градієнт за курсором

Кольорові плями повільно перетікають, а одна тягнеться за курсором, ніби крем по шкірі. Клік змінює палітру — наприклад, під лінійки продукту.

  • Для когокосметикаfashionwellness
  • ТехнологіяCanvas 2D + CSS-розмиття
  • На телефоніпляма йде за пальцем

Рентген-лінза

Під лінзою замість готового продукту видно креслення: розміри, матеріал, горловину. Так банер одразу показує, що за красою стоїть інженерія.

  • Для коговиробництвоB2Bтехніка
  • ТехнологіяSVG + CSS-маска
  • На телефонілінза йде за пальцем

Кінетична типографіка

Рядки послуг пливуть назустріч один одному. Курсор керує швидкістю й напрямком, слово під ним спалахує. Банер без жодної картинки — тільки шрифт і ритм.

  • Для когоагенціїфрилансериівенти
  • ТехнологіяCSS-трансформації
  • На телефонішвидкість від прокрутки

Магнітна сітка

Тисячі точок вигинаються довкола курсора, як простір довкола маси, і світяться ближче до нього. Клік запускає хвилю по всій сітці.

  • Для когоSaaSаналітикафінтех
  • ТехнологіяCanvas 2D, без бібліотек
  • На телефоніреагує на дотик

Паралакс шарів

Хребти, сонце й передній план зсуваються з різною швидкістю за курсором і прокруткою — з'являється глибина без 3D-моделей і відео.

  • Для коготуризмнерухомістьготелі
  • ТехнологіяSVG + CSS-трансформації
  • На телефоніглибина від прокрутки

Хочете такий перший екран?

Підберу ідею під ваш продукт і зроблю банер, який не гальмує сайт: анімація лише на екрані, повага до «менше руху», легкий код.

Написати в Telegram