4 trucchi di sfondo moderni da provare
Sembra che, come elemento costitutivo di un progetto, gli sfondi vivano nell'ombra; tuttavia, questo non è completamente vero. In tempi in cui i CSS cominciavano solo a fare i primi passi verso la conquista del mondo, lo sfondo aveva già assunto il ruolo di principale elemento decorativo del sito.
Al giorno d'oggi la situazione non è cambiata drasticamente. Nella maggior parte dei casi, funge da forza motrice visiva primaria che fornisce un contributo importante al tema generale.
Tradizionalmente, foto e video sono le prime scelte per uno sfondo. Il fatto è che sono semplicemente sezioni di eroi sovrappopolati: ogni altro sito web accoglie il pubblico online con uno sfondo basato su immagini o film. E ciò rende il Web (e la tua interfaccia in particolare) abbastanza simili risultanti in un'esperienza utente anticipata.
Una via d'uscita è trovare nuove soluzioni sfruttando le nuove tecniche e giocando con CSS3, HTML5 e JavaScript. In realtà, c'è una tendenza percepibile di andare per queste opzioni. Ci sono almeno quattro diversi sfondi dinamici moderni che partecipano a una competizione per vincere il loro posto al sole in questi giorni.
Diamo un'occhiata a loro:
Animazione delle particelle
L'animazione delle particelle è una delle scelte più popolari al momento. Un sacco di siti Web ha adottato con successo questa elegante soluzione ispirata al cosmo. Funziona bene in combinazione con tele in tinta unita, illustrazioni, disegni vettoriali e persino foto.
Inoltre, l'animazione varia. Può essere un fascio di punti caoticamente in movimento che sono sparsi in tutta la pagina per imitare il cielo stellato o la pioggia di stelle, o una soluzione a tema costellazione in cui è possibile collegare cerchi con linee sottili. E non è tutto; a volte è abbinato agli effetti attivati dagli eventi di passaggio del mouse: in questo caso, puoi allontanare le particelle, formare dei turbini da loro, collegarli al cursore come una traccia, ecc.
Huub è un esempio dell'animazione tipica delle particelle. È caratterizzato da un insieme di punti mobili che si abbina perfettamente a una colorazione scura ea una mappa posizionata sul retro. Usa il cursore del mouse per divertirti.
Suggerimento: se vuoi fare i conti con lo sfondo dinamico dell'intestazione di Huub, dovresti dare un'occhiata al progetto creato da Dominic Kolbe chiamato demo di parallasse del mouse . Sembra quasi lo stesso. Ma se hai bisogno di una soluzione immediata, allora la libreria JavaScript di Vincent Garreau che viene chiamata Particles.js è quello che stai cercando.
Onde di particelle
Considerando che nell'esempio precedente, l'effetto può essere ottenuto con le abili manipolazioni con HTML5 e CSS3 e un pizzico di magia JavaScript, questo è un esperimento ingegnoso con la libreria Three.js. Con le sue forme ad arco e movimenti fluidi, ricorda facilmente una delle piccole maree. Crea una sensazione di una tela che respira. Puoi usare il cursore del mouse per ruotarlo in direzioni diverse, esplorandolo sia orizzontalmente che verticalmente.
StuurMen ha una sezione "benvenuto" semplice e raffinata. È minimale, pulito e squisito. Il contenuto entra discretamente nel campo visivo mentre lo sfondo pulsante crea uno stato d'animo giusto per il progetto.
Suggerimento: qui puoi trovare una sceneggiatura originale di ThreeJS e il suo adattamento riuscito di Deathfang con una demo chiamata canvas three.js - particelle - onde .
Parallasse al passaggio del mouse
La parallasse stratificata è un'altra tendenza in crescita. Insieme all'animazione delle particelle, è in grado di trasformare uno sfondo statico opaco in una composizione con una sottile sensazione 3D. La cosa bella è che non devi abbandonare la tua scelta di immagini preferita, basta usare la parallasse per farla crescere un po '.
È molto utile quando hai bisogno di animare il titolo, il logo, la scena surreale o l'illustrazione. È adatto anche per varie animazioni astratte. Attivato da un evento di passaggio del mouse standard, non solo aggiunge un'altra dimensione, ma consente anche agli utenti di giocare con l'ambiente.
Il portafoglio personale di Alexandre Rochet ha una pagina splash eccezionale. Non solo il comportamento attira l'attenzione, ma anche la parallasse del passaggio del mouse fa spostare le lettere.
Suggerimento: esistono numerose librerie e snippet di codice validi per generare la parallasse. Uno dei più popolari è un plugin creato da Matthew Wagerfield chiamato Parallax.js . Tuttavia, se hai bisogno di vederlo in pratica, specialmente applicato alla tipografia, puoi esplorare una penna di Frontnerd che mostra la sua interpretazione di Parallasse 3d sul mouse .
Esperimenti WebGL
Gli esperimenti WebGL sono, naturalmente, una variante per sofisticati sviluppatori e clienti esperti con un budget generoso. Possono essere brillanti, impressionanti e un po 'pomposi. Vale ogni centesimo Tuttavia, c'è sempre un unico neo. Con un grande potere derivano grandi responsabilità, e con WebGL non si dovrebbe mai dimenticare la quantità di risorse che consuma e la mancanza di compatibilità completa del browser.
Solarin è tutto incentrato su un'esperienza utente indimenticabile e strabiliante. È un esperimento 3D WebGL ricco di numerose funzionalità interessanti e innovative. Lo sfondo dell'intestazione è un'enorme sfera futuristica che risponde al cursore del mouse e crea un'impressione tremenda.
Suggerimento: mentre imitare ciò che hanno fatto i geni in MediaMonks è diabolicamente complicato, sul Web, puoi sempre trovare un punto di partenza che ti darà spunti di riflessione. Considera il API WebGL e questa è stata codificata da Yoichi Kobayashi che ha ideato un progetto chiamato "La sfera contorta" .
Conclusione
Mentre l'utilizzo di immagini e video è un modo provato e meno doloroso per migliorare lo sfondo, ci sono ancora altre opzioni promettenti e sperimentali che possono ottenere il risultato desiderato. Stare lontano dalle banalità è impegnativo e persino dispendioso, ma queste misure sono giustificate e abbastanza ragionevoli.
Sia che si tratti di un'animazione di particelle semplice ma elegante o di un notevole esperimento WebGL, esso introduce una nuova vita in un dettaglio fondamentale dell'interfaccia, dando al tuo sito web un vantaggio.