L'attacco degli sfondi animati basati su BLOB nel Web Design

Gli sfondi animati sono una caratteristica popolare dei siti Web moderni. Non è più una moda o qualcosa di straordinario. È solo uno dei modi praticabili per adornare un'area eroica di questi tempi. Sebbene ci sia ancora un problema con la compatibilità del browser, la soluzione è riuscita a ritagliarsi una nicchia.

Ci sono diversi tipi di animazioni. Puoi imbatterti in:

• Animazioni di particelle;
• Animazioni caleidoscopiche;
• Animazioni 3D astratte;
• Animazioni geometriche fluide e molto altro.

Mentre diversi anni fa le animazioni di particelle ispirate alle costellazioni dominavano il posatoio, oggi le animazioni a forma di blob eccitano le menti dei team creativi. Cosa sai fare? Il comportamento liquido è irresistibile. La routine di morphing che mostra come una grande goccia si muova dolcemente nello spazio conquista facilmente il pubblico online e mette il tuo sito web in testa.

Per beneficiare di questa tecnica tradizionale, ti offriamo una raccolta di eccezionali frammenti di codice che ti daranno un suggerimento su come creare la tua animazione a forma di blob. Puoi farlo con strumenti tradizionali o nuovi di zecca. Ora, troviamo la corrispondenza perfetta per il tuo prossimo progetto.

Animazione BLOB di Uwe Chardon

L'interpretazione di Uwe Chardon di questa popolare soluzione è pratica e stimolante. È dotato di un blob semplice e piatto con una bella colorazione arancione e bordi lisci posizionati in un ambiente pulito. È riuscito a imitare abbastanza bene il comportamento del liquido.

Il risultato è una combinazione vincente di una forma semplice e un comportamento intricato che sembra piuttosto impressionante.

Guarda l'animazione Pen Blob pure CSS di Uwe Chardon

Blob di Ashton Holgate

L'esempio precedente raffigura un tipo tradizionale di blob con una forma irregolare e un morphing relativamente espressivo. Tuttavia, questo progetto di Ashton Holgate si attiene a una forma più divina, che quasi confina con il cerchio, e i cambiamenti sono appena percettibili. Tuttavia, sembra anche eccezionale.

Inoltre, l'artista ha giocato anche con il testo, costringendolo a cambiare il suo colore su quello opposto quando colpisce l'area della bolla.

Guarda Pen Blob di Ashton Holgate

Caricatore di liquidi rimbalzante di Fabio Ottaviani

Fabio Ottaviani ha messo in pratica la natura ludica del comportamento appiccicoso inerente alle animazioni BLOB. La sua bolla è piccola, ma produce un certo impatto con il suo adorabile morphing e il suo divertente rimbalzo.

Sebbene la targhetta del progetto della penna indichi "Loader", può essere facilmente trasformata in un dettaglio decorativo dello sfondo. E per fare questo tutto ciò che devi sapere è HTML e CSS, poiché l'artista non usa alcuna magia JavaScript. Inteligente.

Guarda il caricatore di liquido rimbalzante a penna di Fabio Ottaviani

Test blob su tela di Shaw

A differenza dell'esempio precedente, questo drop è generato esclusivamente da JavaScript. Quindi preparati a tuffarti in una soluzione entusiasmante e a giocare intricato con la grafica. Inoltre, il concetto si differenzia dagli altri per il suo aspetto primitivo, insieme a un comportamento abbastanza tranquillo e calmo che crea un'atmosfera complessivamente serena.

È abbastanza universale e neutrale. Pertanto, potrebbe diventare un'animazione di sfondo perfetta per numerosi progetti.

Guarda il test blob su tela con penna di Shaw

Blob di Jeffrey

Questa soluzione di Jeffrey è una combinazione vincente di due tendenze. Qui puoi trovare uno sfondo imprevedibile che è molto popolare in questi giorni e il comportamento liquido che prevale sulle altre opzioni.

Lo snippet di codice è realizzato con HTML, CSS e JavaScript. Sembra coerente su vari browser e dispositivi. L'artista utilizza un algoritmo di base a molla che rende l'interazione con l'enorme blob reale e non artificiale.

Nota, anche se il blob occupa metà della scena, non sopraffa gli spettatori. Il comportamento regolare e sereno sta dietro a questa discrezione.

Vedi Pen Blob di Jeffrey

Blob di Charlotte Dann

Se un blob non è sufficiente per produrre un'impressione corretta, puoi sempre sceglierne una dozzina. Charlotte Dann, con il suo ingegnoso frammento di codice, ti mostrerà come farlo senza rovinare l'effetto generale e sovraccaricare i visitatori.

Il suo frammento di codice è solo un piacere per gli occhi. È dotato di molti piccoli blob mobili che interagiscono tra loro. Ognuno sembra un piccolo punto di luce. Insieme, formano un'enorme massa che trasuda calore su tutti i fronti.

Guarda Pen Blob di Charlotte Dann

Ora, passiamo dal mondo piatto a uno tridimensionale.

Blob di Georgi Nikoloff

Blob di Georgi Nikoloff è un punto nel caso. Colpisce immediatamente con la sua colorazione vivace, l'aspetto high-tech e il comportamento dinamico. Lo sviluppatore sfrutta al massimo le tecnologie avanzate, utilizzando WebGL, GLSL e shader a proprio vantaggio. Anche se la soluzione è soggetta alla compatibilità del browser, sembra stimolante.

Guarda Pen blob di Georgi Nikoloff

Esperimento n. 6 di Daniel Del Core

Daniel Del Core mostra al pubblico online come giocare con il rumore Simplex e abbellirlo con alcune trame riprodotte con attenzione. Il risultato è una palla ispirata alle caramelle, simile a una vernice. Sebbene si muova abbastanza velocemente, è così affascinante che è difficile distogliere lo sguardo da esso subito.

Vedi l'esperimento con la penna n. 6 di Daniel Del Core

Macchia di particelle false di Eli Fitch

A differenza dell'esempio precedente, che ha una personalità audace e il carisma di una pop star degli anni '80 ossessionata dallo spandex, questo sembra una cosa del modesto futuro della techno. Il blob è costituito da minuscole particelle che diventano più luminose sotto alcuni angoli per ottenere un aspetto 3D.

Com'era prevedibile, l'artista impiega la magia di Three.js e alcuni lavori ingegnosi con una trama procedurale per realizzare questo concetto.

Guarda il blob di particelle false Pen #3December di Eli Fitch

Generatore di BLOB CSS di Edwin Chen

Concluderemo la nostra collezione con CSS Blob Generator di Edwin Chen. Come afferma il titolo, questa penna presenta un piccolo parco giochi in cui è possibile creare una forma blob.

Qui troverai un piccolo pannello in cui puoi assegnare un raggio a ciascun bordo. Sebbene sia statico e piatto, puoi facilmente copiare il risultato e metterlo in moto con l'aiuto di JavaScript.

Vedi il generatore di blob Pen CSS di Edwin Chen

La forma perfetta per un'atmosfera rilassante

Non sorprende che la natura regolare e calma del comportamento liquido stia diventando popolare in questi giorni. Come un piccolo ipnotizzante ruscello che scorre attraverso la foresta, ti attira e funge da isola di serenità nel mondo online in continua evoluzione.

Le animazioni basate su BLOB sono destinate solo a avvantaggiare i progetti moderni. Sono discreti, anche se attirano sicuramente l'attenzione. Sia che tu scelga una realizzazione elegante e piatta o un 3D stravagante, creerà facilmente un'atmosfera tranquilla.

Arricchirà l'esperienza, adornerà lo sfondo e, allo stesso tempo, darà il via al contenuto. Questi sfondi ti aiuteranno a mantenere l'equilibrio tra dati visivi e testuali.