6 готини интерактивни фона на уебсайтове и как да ги направите

Накарайте посетителите си да останат с 25% по-дълго на страницата ви, намалете степента на отпадане и накарайте хората да се връщат към вашия уеб сайт благодарение на интерактивен фон на уебсайта.

Вашият уебсайт е вашата основна витрина и трябва да отразява вашата култура по най-добрия възможен начин. Освен това, това е и вашата основна цел да привлечете вниманието на посетителите, да ги вдъхновите, да ги заинтересувате от вашия бизнес, докато представяте вашите продукти и / или услуги. Съществуват множество начини за това и един от тях е да предоставите интерактивен фон на уебсайта. Всъщност този вид ефект има множество предимства: увеличаване на 25% от времето, прекарано на дадена страница, намаляване на до 35% средната степен на отпадане и, следователно, кара хората да се връщат към вашия уебсайт (+ 40% връщане на потребителите процент).

В тази статия се съсредоточаваме върху 6 примера, използвайки страхотни и ефективни интерактивни фонове за уебсайтове и изграждайки с различни методи. Нека ги открием!

1. Veritystudios, светещи частици

Създаването на вселена на марката е един от основните приоритети както за B2C, така и за B2B бизнеса в днешно време и преди да прекарате прекалено много в агенция, можете да дадете на вашата Вселена някаква субстанция само с предистория.

Уебсайт Veritystudios, използващ Three.js

Verity не продава само решения за дронове на закрито, но и магия. Те проектираха интерактивен фон, използвайки персонализиран код, за да накарат посетителите да го усетят, като частиците се движат и светлината се синхронизира, давайки хладен ефект на дълбочина и лека анимация на фона при движение на мишката. Използването на кодови езици като BabylonJS или Three.js позволява да създадете свой собствен опит, който идеално пасва на атмосферата, която искате да предложите, но изисква повече технически възможности.

2. HD Rain прави дъжд ️

Обикновено фоновете са абстрактни, произведения на изкуството и форми. Но понякога става по-реално, а когато съвпада с това, което прави компанията, създава невероятно изживяване.

HD-Rain осигурява ефект на дъжд на уебсайта си с Naker.Back

HD Rain е стартиране на прогнозата за времето със седалище в StationF в Париж и искаше да даде тласък на опит на техния уебсайт, за да направи времето отново хладно!

Използвайки Naker.Back, нашия инструмент без код и безплатен инструмент за създаване на интерактивни фонове от само икона, те направиха дъжд за по-малко от 5 минути от създаването до вграждането и в резултат на това видяхме увеличение на прекараното време и връщане на потребителите!

3. Мрежите на Fabio Lamanna

Създаване на уебсайт от Fabio Lamanna с помощта на Particle.js

Използването на вашето лого като вдъхновение за вашия фон винаги е добра идея. Страхотният уеб опит е не само сума от различни неща, но и последователна комбинация. В този случай Fabio lamanna използва добре Particle.js, JS библиотека за създаване на ефекти на частици, добре известни със своите приятни мрежови ефекти.

Супер ефективен е, особено защото Fabio работи в областта на транспортните мрежи. Интерактивният фон е черешката на тортата на нейния уебсайт / портфолио!

4. Лети в небето!

Когато навигирате в мрежата през 2020 г., понякога се нуждаете от пауза. Всички тези уебсайтове, подобни на lookaka, всички тези маркетингови изскачащи прозорци и всичко… Значи затваряте очи, вие сте над облаците и летите в небето!

Интерактивно небе с помощта на Vanta.js

Но можете също да посетите интерактивното небе, направено в Webflow с Vanta.js! Това невероятно изпълнение е поетична почивка, за да ви покажем докъде можем да стигнем с фон. Vanta.js беше проект, създаден от момчетата от Strikingly и представлява списък от шаблони като този, които вграждате с няколко реда код.

5. Моите мехурчета, моите мехурчета! 🧼

Ако някога сте виждали намирането на Немо, знаете, че някои риби (предполагам, че е същото за хората) обичат балончета. Така че защо да не ги използвате на уебсайта си?

DDNA, използвайки персонализиран код за своя интерактивен фон

DDNA е компания за бижута, която реши да играе с форми и цветове, за да има много минималистичен, но ефективен фон на уебсайта. Мехурчетата, които по някакъв начин могат да представят духа на бъдещите бижута, плуват наоколо в екстаз (затова НЕ СТОПЕТЕТЕ МИ НОУО) с хубави цветове и ефект на хладна сянка. Наистина не е типичният уебсайт за бижута, който сте свикнали да посещавате, затова ще ги запомните!

6. Вселената на Дамян

Обикновено казваме, че създаването на опит предполага създаването на вселена. Ето защо астрономията е доста често срещан източник на вдъхновение за много дизайнери.

Пространствен дизайн за Damian Devos, запазващ фоновото му изображение с частици Naker.Back

Но за да се открои, Дамян Девос реши да даде интерактивен тласък на звездите си, създавайки незабавно уау ефект и придавайки усещане за дълбочина на началната си страница. Това е и начин в подобно портфолио да се покажат техническите възможности на дизайнера. Този фон също беше направен с Naker.Back, използвайки икона на звезда, дайте им две различни посоки и добавяне на чувствителност на мишката, всичко това супер бързо и безплатно.