Boom! Esaminare le esplosioni nel web design

Ci sono molti modi per attirare l'attenzione del pubblico. Abbiamo l'imbarazzo della scelta, anche se lo stato attuale delle tecnologie è ancora imperfetto. Stiamo riscontrando alcuni problemi di compatibilità del browser e non tutti i dispositivi possono gestire tutte quelle grandiose soluzioni che gli sviluppatori web ci offrono.

Tuttavia, i giorni dei siti Web statici in cui le immagini erano la principale forza trainante e gli slider con transizioni fantasiose erano l'unica spezia se ne sono andati. Stiamo assistendo a un'era di idee audaci e stravaganze.

Uno degli aspetti più importanti è che gli sviluppatori non limitano la loro attenzione alle grandi cose. Sì, possiamo vedere numerose animazioni su tela, VR travolgente e esperimenti video che richiedono una modalità a schermo intero, ecc. Tuttavia, oggi anche i più piccoli dettagli ottengono la loro dose di attenzione.

I siti Web pullulano di soluzioni microscopiche, in particolare quelle basate sul cursore del mouse. Possiamo imbatterci in numerose idee intelligenti. Sono fantastici, ma nella maggior parte dei casi sono (qual è la parola che cerco?), “tranquilli”. Non sto parlando di loro che emettono suoni poiché alcune delle soluzioni basate sul mouse effettivamente emettono suoni. Sto parlando del loro comportamento.

Il loro comportamento è regolare, calmo e gentile. In alcuni casi, è così uniforme da essere appena percettibile. E se sei troppo impegnato con il contenuto o ci sono altri elementi di distrazione, è probabile che tu possa persino trascurarli. Allora, perché non renderli un po' più “rumorosi”, in modo che gli utenti non perdano occasione per goderselo?

Come fare questo, potresti chiedere. Ho una buona soluzione: far esplodere le cose, letteralmente e in senso figurato.

Particelle nello spazio di Dean Wagman

Prendi, ad esempio, questo fantastico frammento di codice creato da Dean Wagman. Sebbene questo sia il primo esperimento su tela condotto da Dean, è comunque molto stimolante. Tutto quello che devi fare è fare clic in un punto qualsiasi dello schermo e vedrai un'esplosione di centinaia di piccole particelle luminose che volano direttamente sul tuo viso. Anche se non emette alcun suono, è sicuramente tumultuoso.

Vedi la penna
Particles in space di Dean Wagman (@deanwagman).

Gli effetti di esplosione risvegliano sempre la sensazione che sia successo qualcosa di forte. Quindi, perché non usarlo a nostro vantaggio e aggiungere un po' di rumore senza produrre un suono reale? Inoltre, qui abbiamo una selezione di fantastici frammenti di codice. Esploriamoli insieme.

Esplosione di particelle di Aleksei / Kaboomerz di Christopher Lis

Se la soluzione di Dean Wagman ti sembra un po' eccessiva, puoi sempre provare Esplosione di particelle di Aleksei. O se, al contrario, hai bisogno di avere un impatto più significativo puoi sempre adottare Kaboomerz di Christopher Lis.

Il primo frammento di codice presenta una versione "fratellino" dell'esplosione di Dean, in cui dozzine di minuscole particelle formano una piccola esplosione che appare e muore rapidamente. Nel caso di Christopher Lis, rimarrai sorpreso dalle dimensioni delle particelle. I coriandoli che emergono dal cursore del mouse sono tremendamente enormi. Tuttavia, grazie alla loro breve durata, l'effetto complessivo non è schiacciante. È semplicemente piacevole.

Vedi la penna
Esplosione di particelle JS/CSS3 di Aleksei (@alek).

Vedi la penna
#Codicevembre 5 – Kaboomerz di Christopher Lis (@chriscourses).

Esplosioni DOM di David A.

Se ti piace questa idea ma hai bisogno di qualcosa di più simile al digitale e di ispirazione retrò, allora c'è una soluzione straordinaria creata da David. Usa rettangoli di varie dimensioni invece di cerchi per ottenere un bel tocco a 8 bit. Di conseguenza, possiamo assistere a una piccola esplosione con il carisma degli anni '80.

Vedi la penna
Esplosioni DOM di David A. (@meodai).

WebGL Sparkles di CreateJS

Se cerchi una versione realistica, WebGL Sparkles di CreateJS è un esempio perfetto da considerare. Anche se tutte le particelle qui sono bianche, grazie al comportamento ben congegnato sembra un vero sparo celebrativo quando si fa clic sullo schermo. Inoltre, il cursore ha una bella scia che dona alla scena un tocco di magia.

Vedi la penna
CreateJS: WebGL Sparkles di CreateJS (@createjs).

Lanciatore automatico di fuochi d'artificio di Christopher Lis

A proposito, la nostra collezione di esplosioni non sarà completa senza una dose di follia pirotecnica. Automatic Firework Launcher di Christopher Lis è un fantastico esempio da considerare. È un lanciatore di fuochi d'artificio da cartone animato. Grazie a particelle colorate e forme simili a garofani, ricorda i veri fuochi d'artificio che illuminano il cielo stellato.

Vedi la penna
Giorno 29 – Lanciatore automatico di fuochi d'artificio di Christopher Lis (@chriscourses).

Concetto di distruzione della finestra modale di LegoMushroom

Gli esperimenti su tela non sono gli unici nella nostra lista. Gli effetti di esplosione possono essere applicati a vari elementi dell'interfaccia, come una finestra modale. LegoMushroom ne ha una chiara prova. Dai un'occhiata al loro concetto di finestra modale. Quando chiudi la finestra, invece di scomparire, si rompe in più pezzi. È un'aggiunta perfetta a tutti quei fantasiosi siti Web completamente illustrati che sono piuttosto popolari in questi giorni.

Vedi la penna
Concetto di distruzione della finestra modale di LegoMushroom (@sol0mka).

SCSS Explosion Effect di Sylvain Garnot / Esplosione di testo SVG di Kacper Bawol / Esplosione di testo su tela di Tim Horwood

Gli effetti di esplosione possono essere utili anche per la tipografia. Si consideri l'effetto SCSS Explosion di Sylvain Garnot, l'esplosione del testo SVG di Kacper Bawol e l'esplosione del testo Canvas di Tim Horwood.

Tutti e tre dimostrano un effetto di esplosione applicato al testo. Com'era prevedibile, il cursore del mouse attiva ciascuno di essi.

Sylvain Garnot consente agli utenti di far esplodere ogni lettera in cento minuscoli quadrati. Il concetto di Kacper Bawol sembra quasi lo stesso, ma questa volta il simbolo si rompe in piccoli triangoli. E, Tim Horwood consente agli utenti di far esplodere l'intero testo in minuscole particelle che alla fine tornano e riportano tutto al suo stato originale. Tutte e tre le idee sono semplicemente incredibili.

Vedi la penna
SCSS – Explosion Effect di sylvain garnot (@sylvaingarnot).

Vedi la penna
Esplosione di testo Svg di Kacper Bawol (@Casperovic).

Vedi la penna
Esplosione del testo della tela, clicca per vedere di Tim Horwood (@tdhorwood).

House Explosion di Ko.Yelie

L'effetto esplosione può essere applicato anche alle immagini. Questo concetto di Ko.Yelie è un ottimo esempio. Cliccando sull'immagine, la fai esplodere in piccoli pezzi. Sebbene sia difficile trovare un'applicazione per questo nelle interfacce della vita reale, è sempre bello avere a portata di mano alcune soluzioni straordinarie che possono far sembrare le cose comuni uniche.

Vedi la penna
House Explosion di Ko.Yelie (@ko-yelie).

Una caratteristica esplosiva

Un effetto esplosione è uno strumento controverso. Non è adatto a tutte le interfacce disponibili a causa della sua natura "esplosiva" e del suo potente carisma. Anche se sembra innocuo e persino neutro se applicato in tandem con il cursore del mouse, è piuttosto "rumoroso", quindi è necessario essere cauti.

Ricorda, non tutte le persone cercano intrattenimento dai siti web. E non tutti sono all'altezza delle stravaganze e delle impressioni travolgenti. Alla fine della giornata, il contenuto rimane sempre il re.

Tuttavia, se stai cercando alcuni modi insoliti per creare un'interazione utente eccitante che sia giocosa e per così dire "rumorosa", allora un effetto esplosione può senza dubbio tornare utile.