8 fragmente care demonstrează efectul de respingere în design web

Experimentele cu pânza sunt de vorbă în oraș în aceste zile. Ele pot fi văzute nu numai ca concepte în locurile de joacă populare pentru dezvoltatori web, ci și ca soluții pentru proiecte din viața reală. Varietatea este, fără îndoială, uimitoare: de la animații primitive cu particule bazate pe plugin-uri populare până la idei unice, care sunt o combinație de instrumente moderne și dovedite în timp.

Astăzi, vă atragem atenția asupra efectului de respingere. Chiar dacă are un comportament respingător, cu siguranță are o natură atractivă. Încurajând utilizatorii să se joace cu detaliile peisajului împingându-le în diferite direcții, sau, în unele cazuri, chiar aruncând totul în aer, devine instantaneu principalul divertisment. Face experiența utilizatorului plăcută și interesantă.

Haideți să explorăm o colecție de demonstrații inspiratoare cu fragmente de cod, astfel încât să puteți vedea singur tendința unică.

Respingerea liniilor

La prima vedere, acest demo amintește de un set de corzi de chitară. Mutați cursorul peste ele și veți vedea magia. Liniile încep să se îndoaie și să se deformeze, formând o sferă mică.

Panoul de opțiuni din dreapta vă permite să controlați efectul. Puteți seta raza intervalului mouse-ului, puteți adăuga sau reduce numărul de linii sau puteți modifica distanța dintre șiruri. Observați fizica. Este bine gândit și reprodus cu atenție.

Vedeți liniile de respingere a stiloului de Daniel Velasquez

30.000 de particule

Efectul de respingere arată pur și simplu minunat atunci când este aplicat pe mii de puncte în loc de linii. Justin Windle demonstrează acest lucru în practică. Proiectul său iconic și extrem de popular pe CodePen prezintă un panou în care 30.000 de particule minuscule stau confortabil.

Sunt strâns împachetate împreună pentru a crea o suprafață densă. Treceți cursorul mouse-ului peste el și veți vedea cum punctele fug de dvs. Deși nu dispar din vedere, ele sunt reținute de raza mouse-ului. Prin urmare, puteți vedea un cerc relativ mare, gol, unde punctele formează granița.

Vedeți Pen 30.000 de particule de Justin Windle

Particule interactive

Dacă cadrul dreptunghiular simplu nu vă inspiră creativitatea, puteți oricând aduna toate acele puncte în personaje, așa cum a făcut Tamino Martinius în proiectul său Interactive Particles.

Demo-ul său include un cuvânt, în care fiecare literă este construită din sute de puncte. Suflați-le cu cursorul mouse-ului pentru a condimenta lucrurile. Există un mic centru de control unde puteți modifica parametrii experimentului și îl puteți ajusta la preferințele dvs.

Vedeți sigla interactivă a particulelor stiloului de Tamino Martinius

Text către particule

Să ne jucăm cu culoarea și dimensiunea pentru a îmbogăți cele două concepte anterioare cu câteva răsturnări de viață, așa cum a făcut Louis Hoebregts în proiectul său Text to Particles.

Spre deosebire de soluția lui Tamino Martinius, aici punctele au raze diferite, precum și culori diferite. Mai mult, sunteți binevenit să modificați textul setându-l folosind intrarea. Cursorul mouse-ului are un comportament neted și blând care dispersează mulțimea și duce la o mică tulburare în locul de joacă. Acesta este un demo cu adevărat plăcut pentru ochi.

Vedeți Pen Text to particules de Louis Hoebregts

Bile și gravitație

Efectul respingător poate fi ușor combinat cu alte soluții bazate pe fizică pentru a obține rezultate remarcabile. Luați în considerare bilele și gravitația.

Numele proiectului spune totul. Gravitația, precum și efectul de respingere, se află în centrul conceptului - făcând experiența intrigantă.

Spre deosebire de exemplele anterioare, aici trebuie să apucați cercul și să-l folosiți ca instrument pentru a îndepărta celelalte cercuri. Aproape că poți lovi aceste bile plate colorate, forțându-le să se miște. În plus, trebuie să lupți cu gravitația, ceea ce face experiența și mai incitantă.

Vedeți Pen BALLS&GRAVITY de Marco Dell'Anna

Atractor

Acest proiect al lui Marco Dell'Anna este construit și în jurul gravitației. Îl poți controla cu cursorul mouse-ului. Folosiți-l pentru a muta particulele și a le rearanja poziția.

Rețineți că, chiar dacă particulele își vor schimba poziția, ele se vor strădui totuși să se întoarcă în cerc. Deci aici, puteți vedea un cursor al mouse-ului care joacă rolul unui magnet și, în același timp, un instrument pentru a îndepărta punctele (cel puțin, temporar).

Vedeți Pen Atractor – MatterJS de Marco Dell'Anna

Activati

Activate este un stilou remarcabil creat de Gerard Ferrandez. La fel ca în exemplul precedent, autorul a optat și pentru gravitație. De data aceasta este combinat cu comportamentul fluid și bineînțeles cu efectul de respingere. Drept urmare, proiectul ne ademenește prin aspectul său plin de distracție și natura jucăușă.

Vezi stiloul activat de Gerard Ferrandez

Plasma Moar

Efectul de respingere poate fi de mare ajutor și pentru animațiile cu particule. Le poți face și mai palpitante. Aruncă o privire la Moar Plasma.

Aici, puteți vedea o animație haotică în care cursorul mouse-ului sperie toate particulele împingându-le în diferite părți. Nu numai că te poți bucura de demo, dar și interacționa cu ea.

Vedeți Pen Moar Plasma de John Chin-Jew

Particule de zăpadă

Snowy Particles este un alt exemplu excelent în care animația tradițională cu particule primește un impuls. Nat, autorul stiloului, a folosit două trucuri.

În primul rând, cursorul mouse-ului are puterea de a transforma puncte simple în fulgi de zăpadă, astfel încât scena să pară cu adevărat magică. În al doilea rând, se adaugă un mic efect de respingere care dispersează ușor masa de zăpadă, astfel încât să poți vedea fulgi de zăpadă distinctivi. Pur și simplu fantastic.

Vedeți zăpada Pen particules.js de Nat

Repelente

Un alt domeniu în care efectul de respingere aduce beneficii și transformă cu ușurință o scenă plictisitoare într-o extravaganță este efectele de text. Am văzut deja cum cuvintele create din o mie de puncte arată extraordinar. Este timpul să schimbați punctele în linii și să condimentați totul cu efectul de respingere. Considera Repelers ca punct în caz.

Proiectul prezintă un cuvânt în care simbolurile sunt făcute din linii scurte și subțiri care sunt îndreptate către spectatori. În acest fel, aproape îi poți simți natura volumetrică. Luați cursorul mouse-ului și trageți-l peste text și veți vedea cum încep să danseze liniile.

Comportamentul lor este neted și plăcut pentru ochi, chiar dacă textul în sine pare puțin ascuțit și acut. În plus, liniile se mișcă și singure, așa că se simte ca și cum există o adiere mică care balansează părți ale compoziției. Ca rezultat, vă puteți bucura de o adevărată capodoperă în care un text simplu conduce spectacolul.

Vezi Repelers Pen de Rein van der Woerd

Atracția prin repulsie

Chiar dacă efectul de respingere este folosit pentru a îndepărta detaliile compoziției, totuși este complet magnetic. Nu-ți poți lua ochii de la ea. Atrage instantaneu un ochi cu comportamentul său jucăuș și îi îndeamnă pe utilizatori să interacționeze cu scena.

Efectul respingător nu este singurul în lupta sa de a cuceri publicul. Colaborează perfect cu alte tipuri de animații și efecte, aducând soluții unice, care captează atenția.