Bum! Examinarea exploziilor în design web

Există multe modalități de a atrage atenția publicului. Suntem răsfățați de alegere, deși starea actuală a tehnologiilor este încă imperfectă. Ne confruntăm cu unele probleme de compatibilitate cu browserul și nu orice dispozitiv poate face față tuturor acele soluții grandioase pe care ni le aduc dezvoltatorii web.

Cu toate acestea, vremurile site-urilor web statice în care imaginile erau principala forță motrice și glisoarele cu tranziții fanteziste erau singurele condimente. Asistăm la o eră a ideilor îndrăznețe și a extravagantelor.

Printre cele mai mari aspecte este că dezvoltatorii nu își limitează concentrarea la lucruri mari. Da, putem vedea numeroase animații de pânză, experimente VR și video copleșitoare care necesită un mod pe ecran complet etc. Cu toate acestea, astăzi chiar și cele mai mici detalii primesc propria doză de atenție.

Site-urile web sunt pline de soluții microscopice, în special cele care se bazează pe cursorul mouse-ului. Ne putem împiedica de numeroase idei inteligente. Sunt fantastice, dar în majoritatea cazurilor sunt (care este cuvântul pe care îl caut?), „liniștite”. Nu vorbesc despre ei care scot sunete, deoarece unele dintre soluțiile bazate pe mouse scot de fapt un sunet. Vorbesc despre comportamentul lor.

Comportamentul lor este lin, calm și blând. În unele cazuri, este atât de fără întreruperi încât este abia perceptibil. Și dacă sunteți prea implicat cu conținutul sau există alte elemente care vă distrag atenția, sunt șansele să le puteți trece cu vederea. Așadar, de ce să nu le facem puțin „mai tare”, pentru ca utilizatorii să nu piardă ocazia de a se bucura de ele?

Cum să faci asta, te poți întreba. Am o soluție bună: să fac lucrurile să explodeze – la propriu și la figurat.

Particule în spațiu de Dean Wagman

Luați, de exemplu, acest fragment de cod fantastic creat de Dean Wagman. Deși acesta este primul experiment pe pânză realizat de Dean, este totuși extrem de inspirat. Tot ce trebuie să faceți este să faceți clic oriunde pe ecran și veți vedea o explozie de sute de particule luminoase mici care zboară chiar în fața dumneavoastră. Chiar dacă nu scoate niciun sunet, cu siguranță se simte tumultuos.

Vezi Pen
Particule în spațiu de Dean Wagman (@deanwagman).

Efectele de explozie trezesc întotdeauna sentimentul că s-a întâmplat ceva tare. Deci, de ce să nu folosim acest lucru în avantajul nostru și să adăugăm ceva zgomot fără a scoate un sunet real? Cu atât mai mult, avem aici o selecție de fragmente de cod fantastice. Să le explorăm împreună.

Explozie de particule de Aleksei / Kaboomerz de Christopher Lis

Dacă soluția de la Dean Wagman arată puțin prea mult, poți oricând să încerci Particle explosion de Aleksei. Sau dacă, dimpotrivă, trebuie să ai un impact mai semnificativ, poți oricând să adopti Kaboomerz de Christopher Lis.

Primul fragment de cod prezintă o versiune „frate mai mic” a exploziei lui Dean, în care zeci de particule minuscule formează o mică explozie care apare rapid și moare. În cazul lui Christopher Lis, vei fi surprins de dimensiunea particulelor. Confetiul care iese din cursorul mouse-ului este extraordinar de uriaș. Cu toate acestea, datorită duratei lor de viață scurte, efectul general nu este copleșitor. Este doar plăcut.

Vezi Pen
Explozie de particule JS/CSS3 de către Aleksei (@alek).

Vezi Pen
#Codevember 5 – Kaboomerz de Christopher Lis (@chriscourses).

Explozii DOM de David A.

Dacă vă place această idee, dar aveți nevoie de ceva mai digital și de inspirație retro, atunci există o soluție uimitoare creată de David. El folosește dreptunghiuri de diferite dimensiuni în loc de cercuri pentru a obține o atingere minunată de 8 biți. Drept urmare, putem asista la o mică explozie cu carisma anilor '80.

Vezi Pen
Explozii DOM de David A. (@meodai).

WebGL Sparkles de la CreateJS

Dacă căutați o versiune realistă, WebGL Sparkles by CreateJS este un exemplu perfect de luat în considerare. Chiar dacă toate particulele de aici sunt albe, datorită comportamentului bine gândit, arată ca un adevărat foc de armă de sărbătoare când dai clic pe ecran. În plus, cursorul are un traseu minunat care oferă scenei o notă de magie.

Vezi Pen
CreateJS: WebGL Sparkles by CreateJS (@createjs).

Lansatorul automat de artificii de Christopher Lis

Apropo de asta, colecția noastră de explozii nu va fi completă fără o doză de nebunie pirotehnică. Lansatorul automat de artificii de Christopher Lis este un exemplu fantastic de luat în considerare. Este un lansator de artificii desenat. Datorită particulelor colorate și formelor asemănătoare garoafelor, ne amintește de adevăratele artificii care luminează cerul înstelat.

Vezi Pen
Ziua 29 – Lansator automat de artificii de Christopher Lis (@chriscourses).

Conceptul de distrugere a ferestrei modale de la LegoMushroom

Experimentele canvas nu sunt singurele din lista noastră. Efectele de explozie pot fi aplicate diferitelor elemente ale interfeței, cum ar fi o fereastră modală. LegoMushroom are o dovadă vie în acest sens. Aruncă o privire asupra conceptului lor de fereastră modală. Când închizi fereastra, în loc să dispară, se sparge în mai multe bucăți. Este o completare perfectă pentru toate acele site-uri web de lux, complet ilustrate, care sunt destul de populare în zilele noastre.

Vezi Pen
Conceptul de distrugere a ferestrei modale de LegoMushroom (@sol0mka).

Efect de explozie SCSS de Sylvain Garnot / explozie de text SVG de Kacper Bawol / explozie de text canvas de Tim Horwood

Efectele de explozie pot fi benefice și pentru tipografie. Luați în considerare Efectul de explozie SCSS de Sylvain Garnot, explozia de text SVG de Kacper Bawol și explozia de text Canvas de Tim Horwood.

Toate trei demonstrează un efect de explozie aplicat textului. În mod previzibil, cursorul mouse-ului le declanșează pe fiecare.

Sylvain Garnot permite utilizatorilor să arunce în aer fiecare literă în o sută de pătrate minuscule. Conceptul lui Kacper Bawol arată aproape la fel, dar de data aceasta simbolul se sparge în mici triunghiuri. Și, Tim Horwood le permite utilizatorilor să arunce în aer întregul text în particule minuscule care în cele din urmă revin și readuc totul la starea inițială. Toate cele trei idei sunt pur și simplu incredibile.

Vezi Pen
SCSS – Efect de explozie de sylvain garnot (@sylvaingarnot).

Vezi Pen
Explozie de text SVG de Kacper Bawol (@Casperovic).

Vezi Pen
Explozie text pânză, faceți clic pentru a vizualiza de Tim Horwood (@tdhorwood).

Explozia casei de Ko.Yelie

Efectul de explozie poate fi aplicat și imaginilor. Acest concept al lui Ko.Yelie este un exemplu grozav. Făcând clic pe imagine, o faci bucăți mici. Deși este dificil să găsești o aplicație pentru asta în interfețele din viața reală, este întotdeauna grozav să ai la îndemână câteva soluții extraordinare care pot face ca lucrurile comune să pară unice.

Vezi Pen
Explozia casei de Ko.Yelie (@ko-yelie).

O caracteristică explozivă

Un efect de explozie este un instrument controversat. Nu este potrivit pentru fiecare interfață de acolo din cauza naturii sale „explozive” și a carismei puternice. Chiar dacă pare inofensiv și chiar neutru atunci când este aplicat în tandem cu cursorul mouse-ului, este destul de „tare” – așa că trebuie să fii precaut.

Amintiți-vă, nu toți oamenii caută divertisment de pe site-uri web. Și nu toată lumea este până la extravaganțe și impresii copleșitoare. La sfârșitul zilei, conținutul rămâne întotdeauna regele.

Cu toate acestea, dacă sunteți în căutarea unor modalități neobișnuite de a crea o interacțiune captivantă a utilizatorului, care este jucăușă și așa cum să spunem „tare”, atunci un efect de explozie poate fi, fără îndoială, util.