6 класных інтэрактыўных фонавых сайтаў і як іх зрабіць

Атрымайце наведвальнікаў на 25% даўжэй на вашай старонцы, паменшыце ступень адмоваў і прымусіце людзей вярнуцца да вашага сайта дзякуючы інтэрактыўнаму фону сайта.

Ваш сайт - галоўная вітрына, і ён павінен найлепшым чынам адлюстроўваць вашу культуру. Акрамя таго, гэта і ваша галоўная задача прыцягнуць увагу наведвальнікаў, натхніць іх, зацікавіць іх бізнесам, прадстаўляючы вашы прадукты і / ці паслугі. Ёсць некалькі спосабаў зрабіць гэта, і адзін з іх - забяспечыць інтэрактыўны фон на сайце. Сапраўды, такі эфект мае мноства пераваг: павелічэнне 25% часу, праведзенага на старонцы, зніжэнне да 35% сярэдняга ўзроўню адмоваў і, такім чынам, прымушэнне людзей вяртацца на ваш сайт (+ 40% вяртання карыстальнікаў).

У гэтым артыкуле мы сканцэнтраваны на 6 прыкладах, якія выкарыстоўваюць выдатныя і эфектыўныя інтэрактыўныя фоны для вэб-сайтаў і будуюць рознымі метадамі. Давайце даведаемся іх!

1. Veritystudios, светлавыя часціцы

Стварэнне сусветнай гандлёвай маркі - адзін з галоўных прыярытэтаў як для B2C, так і для B2B бізнесу, і перш чым траціць занадта шмат у агенцтве, вы можаце даць сваёй сусвету нейкае рэчыва толькі з фонам.

Сайт Veritystudios з дапамогай Three.js

Verity прадасць не толькі рашэнні ў памяшканні, але і магію. Яны распрацавалі інтэрактыўны фон з выкарыстаннем уласнага кода, каб прымусіць наведвальнікаў адчуваць гэта, з рухамі часціц і сінхранізацыяй святла, што дае круты эфект глыбіні і нязначную анімацыю на фоне руху мышы. Выкарыстанне моў кода, такіх як BabylonJS або Three.js, дазваляе стварыць уласны досвед, які выдатна адпавядае атмасферы, якую вы хочаце прапанаваць, але патрабуе дадатковых тэхнічных магчымасцей.

2. HD дождж робіць дождж ️

Звычайна фоны абстрактныя, творы мастацтва і формы. Але часам гэта становіцца больш рэальным, і калі ён супадае з тым, што робіць кампанія, гэта стварае дзіўнае ўражанне.

HD-Rain дае эфект дажджу на сваім сайце з Naker.Back

HD Rain - гэта запуск прагнозу надвор'я, які базуецца ў StationF у Парыжы, і хацеў надаць імпульс на сваім сайце, каб зноў прахалодна!

Выкарыстоўваючы Naker.Back, наш безкодавы і бясплатны інструмент для стварэння інтэрактыўных фонаў з простай іконы, яны давалі дождж менш чым за 5 хвілін ад стварэння да ўстаўкі, і, як вынік, павялічыўся затрачаны час і вяртанне карыстальнікаў!

3. Сеткі Фабіё Ламанны

Стварэнне сайта Фабіа Ламанны з дапамогай Particle.js

Выкарыстанне вашага лагатыпа як натхнення для вашага фону заўсёды добрая ідэя. Выдатны Інтэрнэт-досвед - гэта не толькі колькасць розных рэчаў, але і цэласнае спалучэнне. У гэтым выпадку Fabio lamanna добра выкарыстаў Particle.js, бібліятэку JS для стварэння эфектаў часціц, добра вядомых сваімі прыемнымі сеткавымі эфектамі.

Гэта вельмі эфектыўна, асабліва таму, што Fabio працуе ў галіне транспартных сетак. Інтэрактыўны фон - гэта глазура на торце яго сайта / партфоліо!

4. Ляціце ў неба!

Пры навігацыі ў Інтэрнэце ў 2020 годзе вам часам патрэбна паўза. Усе гэтыя вэб-сайты, падобныя на навінкі, усе гэтыя маркетынгавыя ўсплываючыя вокны, і ўсё… Такім чынам, вы зачыняеце вочы, знаходзіцеся над аблокамі, ляцеце ў неба!

Інтэрактыўнае неба з дапамогай Vanta.js

Але вы таксама можаце наведаць інтэрактыўнае неба, зробленае на Webflow з Vanta.js! Гэты дзіўны спектакль - гэта паэтычны перапынак, каб паказаць, як далёка мы можам ісці з фонам. Vanta.js - гэта праект, створаны хлопцамі з Дзіўна, і гэта спіс падобных шаблонаў, у які вы ўстаўляеце некалькі радкоў кода.

5. Мае бурбалкі, мае бурбалкі! 🧼

Калі вы калі-небудзь бачылі пошук Нема, вы ведаеце, што некаторыя рыбы (я думаю, гэта тое ж самае для людзей) любяць бурбалкі. Дык чаму б не выкарыстоўваць іх на сваім сайце?

DDNA, выкарыстоўваючы карыстацкі код для свайго інтэрактыўнага фону

DDNA - ювелірная кампанія, якая вырашыла гуляць з формамі і колерамі, каб мець вельмі мінімалістычны, але эфектыўны фон на сайце. Бурбалкі, якія нейкім чынам могуць прадстаўляць дух будучых каштоўных камянёў, плывуць вакол у экстазе (так, НЕ СТАВАЙЦЕ МНЕ) з прыгожымі колерамі і эфектам прахалоднага ценю. Сапраўды не тыповы ювелірны сайт, які вы прывыклі наведваць, вось чаму вы іх запомніце!

6. Сусвет Даміяна

Мы звычайна кажам, што стварэнне вопыту мае на ўвазе стварэнне сусвету. Менавіта таму астраномія - даволі распаўсюджаная крыніца натхнення для многіх дызайнераў.

Прасторавы дызайн Damian Devos, захоўваючы яго фонавы малюнак з часціцамі Naker.Back

Але, каб вылучыцца, Даміян Дэвос вырашыў надаць інтэрактыўным штуршком сваім зоркам, стварыўшы імгненна эфект вау і даючы адчуванне глыбіні на сваёй старонцы. Гэта таксама спосаб, як у такім партфелі, паказаць тэхнічныя магчымасці дызайнера. Гэты фон таксама быў зроблены з Naker.Back, выкарыстоўваючы значок зоркі, даць ім два розныя кірункі і дадаўшы адчувальнасць мышы, і ўсё гэта супер хутка і бясплатна.