Fai effetti interattivi di tipografia 3D

La tipografia ha sempre svolto una parte importante nell'arsenale di strumenti di qualsiasi designer in quanto selezionano il tipo di carattere giusta che migliorerà il messaggio e presenterà il giusto contesto per ciò che viene comunicato. Negli ultimi otto anni, i web designer hanno avuto la capacità di portare dentro caratteri tipografici personalizzati ad esempio tipografia cinetica al loro design e avere un controllo tipografico simile a coloro che sono stati goduti dai designer di stampa.

Dai un'occhiata a molti dei siti che sono presenti come premiati o ricevendo il "sito dei titoli del giorno" e noterete presto che il loro uso della tipografia diventa centrale per il design, consentendo loro di salire sopra la loro concorrenza. Questo può variare da moduli di lettera animata, movimento reattivo alle interazioni dell'utente, all'uso grassetto dei moduli di tipo che prendono la fase centrale (mantieni i file tipografici al sicuro deposito cloud. ).

Se vuoi creare un sito di presa attenzione con zero fuss, prova a Builder del sito web pure. E assicurati che le prestazioni del tuo sito siano ottimizzate con la parte superiore web hosting .

• Font 3D: 9 consigli di tipo superiore

In questo tutorial, l'effetto del tipo utilizzerà le forme delle lettere come una maschera per alcuni sentimenti di particelle veloci e fluttuanti che ridurranno dinamicamente e spostaranno dinamicamente attraverso le lettere. Non solo ci sarà questa bella animazione, ma poiché questo sarà reso sul Tela html5 Elemento, questo sarà trasformato in 3D per ruotare verso il mouse mentre si muove attorno allo schermo. Questo è perfetto per le intestazioni del sito o solo quando è necessario afferrare l'attenzione dell'utente per una chiamata all'azione.

Scarica i file tutorial qui

01. Avvia il processo

Aprire la cartella "Start" dai file del progetto nel tuo codice IDE. Il progetto inizierà creando la classe di oggetti particelle. Questo sarà utilizzato per creare le immagini fluenti all'interno del testo nel progetto. Apri il file 'sketch.js' e aggiungi la seguente variabile per iniziare a creare la particella di base.

 Funzione particella () {
  this.pos = creaverector (casuale (larghezza), casuale ((altezza - 100)));
  questo.vel = createevector (0, 0);
  questo.acc = createever (0, 0);
  questo.maxspeed = maxspeed;
  This.Prevpos = this.pos.copy (); 

02. Aggiorna la particella

Per spostare la particella, una funzione di aggiornamento verrà eseguita ogni fotogramma, questo risolverà la velocità della particella e dell'accelerazione alla velocità. La velocità sarà alla fine limitata da una variabile globale che verrà aggiunta in seguito. La velocità viene aggiunta alla posizione della particella individuale. Creando una particella, diverse migliaia verranno create sullo schermo in qualsiasi momento.

 This.Update = Function () {
  questo.vel.add (questo.acc);
  questo.vel.limit (questo.maxspeed);
  questo.pos.add (questo.vel);
  questo.acc.mult (0);
  } 

03. Vai con il flusso

Per dare alle particelle il loro movimento fluente, verrà seguito un campo di flusso generato dal rumore. La funzione creata qui consente di passare il vettore del flusso e sarà poi seguito, quindi il nome di questa funzione. La forza della direzione vettoriale verrà applicata alla particella.

 This.Follow = Function (vettori) {
  var x = piano (questo.pos.x / scl);
  var y = piano (this.pos.y / scl);
  var index = x + y * cols;
  VAR Force = Vettori [indice];
  questo.Applyforce (forza);
  } 

04. Segui ma non troppo da vicino

Per fermare tutte le particelle che si raggruppano insieme, il che può accadere facilmente con questo tipo di movimento, le particelle avranno una piccola quantità di casualità aggiunta alla loro posizione. Ciò causerà una leggera quantità di dispersione.

 This.Scotter = Funzione (vettori) {
  questo.pos.x + = casuale (-0,9, 0.9);
  questo.pos.y + = casuale (-0,9, 0.9);
  }
  questo.Applyforce = funzione (forza) {
  questo.acc.add (forza);
  } 

05. Visualizza la particella

La funzione Mostra qui visualizza la particella. La prima cosa che fa è aggiungere un colpo di pixel di un colore grigio chiaro per creare la linea. La linea è prelevata dalla sua posizione corrente alla sua ultima posizione sul telaio precedente. La posizione precedente è memorizzata per la prossima volta attraverso il loop.

 questo.Show = Function () {
  ictus (180);
  peso da corsa (1);
  linea (questo.pos.x, this.pos.y, this.prevpos.x, this.prevpos.y);
  This.UpdatePrev ();
  }
  This.UpdatePrev = Function () {
  this.prevpos.x = this.pos.x;
  questo.prevpos.y = this.pos.y;
  } 

06. Avvolgi

La funzione dei bordi funziona se la particella raggiunge il bordo dello schermo e, in tal caso, avvolgela intorno a venire sul lato opposto. Questa sezione riguarda la posizione X in modo che stia rilevando se è maggiore della larghezza dello schermo, inviandolo al bordo sinistro e viceversa.

 questo.edes = Function () {
  se (questo.pos.x & gt; larghezza) {
  questo.pos.x = 0;
  This.UpdatePrev ();
  }
  Se (questo.pos.x & lt; 0) {
  questo.pos.x = larghezza;
  This.UpdatePrev ();
  } 

07. Delizie del wrapper

Questo codice è il resto del rilevamento del bordo e rileva la particella sull'asse y per la parte superiore e inferiore dello schermo. Le parentesi qui avvolgono l'intera classe di particelle. Questo significa usare questa classe molte particelle possono essere create.

 IF (questo.pos.y & gt; altezza) {
  questo.pos.y = 0;
  This.UpdatePrev ();
  }
  Se (questo.pos.y & lt; 0) {
  questo.pos.y = altezza;
  This.UpdatePrev ();
  }
  }
} 

08. Fai molte particelle

Ora come la particella viene creata è ora di pensare di fare molte particelle. Per fare questo tutto il nostro codice può andare sopra la classe della funzione delle particelle. Qui viene dichiarato un numero di variabili globali per consentire il funzionamento del sistema. Saranno chiamati in vari momenti durante il codice, quindi possono quindi essere esplorati.

 VAR INC = 0.1;
VAR SCL = 100, ZOFF = 0;
var cols, righe, movimento = 0;
particelle var = [];
var flowfield;
var img;
var maxspeed;
var t, calcx = 0, calcy = 0, curry = 0, curry = 0, targetx = 0, targety = 0; 

09. Imposta tutto

La funzione di installazione, dichiarata qui, imposta come lo schermo guarderà all'inizio. Il primo rilevamento è fatto è vedere come è la larghezza dello schermo. Se è relativamente grande, viene caricata una grande immagine, viene creata la tela e questo è ridimensionato tramite CSS per adattarsi al display.

 Setup funzione () {
  se (windowwidth & gt; 1200) {
  img = Loadimage ("Assets / Studio.png");
  var canvas = createcanvas (1920, 630);
  Maxspeed = 10.5;
  } 

10. Altre schermate

Il resto dell'istruzione IF controlla le diverse risoluzioni dello schermo e carica un'immagine che è più appropriata per quella dimensione dello schermo. Allo stesso modo vengono creati elementi di tela di dimensioni diverse. Questo è principalmente per fermare un cellulare che si occupa di più pixel rispetto a quello che deve.

 altro se (windowwidth & gt; 900) {
  IMG = LoadImage ("Asset / studio-tablet-wide.png");
  var canvas = createcanvas (1200, 394);
  SCL = 60;
  Maxspeed = 7;
  } altro {
  img = Loadimage ("Asset / Studio-Tablet-Tall.png");
  var canvas = createcanvas (700, 230);
  SCL = 40;
  Maxspeed = 5;
  } 

11. Fai una griglia

Una volta elaborata la dimensione dello schermo, la tela viene posizionata all'interno del tag div dell'intestazione nella pagina INDEX.HTML. Un numero di colonne e righe vengono elaborate in base alla larghezza e altezza; È un po 'come una griglia invisibile. Infine, un array è impostato per il campo di flusso.

 canvas.parent ('header');
cols = pavimento (larghezza / scl);
righe = pavimento (altezza / SCL);
flowfield = nuovo array (Cols); 

12. Fai particelle

Il numero di particelle è configurato in base alla larghezza dello schermo - se lo schermo è largo 1920 pixel, verranno creati 2500 particelle e si sposta verso il basso da lì. A per loop crea le nuove particelle. Il colore di sfondo dello schermo è impostato su bianco quasi completo.

 Var Numparticles = Math.Floor ((2500/1920) * Larghezza);
  per (var i = 0; i & lt; numparticles; i ++) {
  particelle [i] = nuova particella ();
  }
  sfondo (245);
} 

13. Disegna lo schermo

I risultati di tutti i calcoli sono disegnati sullo schermo ogni fotogramma nella funzione Draw. Innanzitutto, un rettangolo grigio chiaro con un'opacità molto bassa riempie lo schermo per sbiadire ciò che è stato disegnato in precedenza. Dopo che questo è disegnato, il riempimento è spento quando le particelle saranno costituite da tratti non riempie.

 Funzione Disegna () {
  Nostroke ();
  Riempimento (245, 10);
  rect (0, 0, larghezza, altezza);
  nofill ();
  var yoff = 0; 

14. Creare un effetto di flusso

Per ottenere l'effetto di flusso ci sono due "per" loop che si muovono attraverso le righe e le colonne per aggiornare i valori di rumore. Questi vengono quindi modificati in angoli dal valore del rumore pronto per aggiornare le particelle per ciascuna delle posizioni sullo schermo.

 per (var y = 0; y & lt; righe; y ++) {
  var xoff = 0;
  per (var x = 0; x & lt; cols; x ++) {
  var index = (x + y * cols);
  var angolo = rumore (xoff, yoff, zoff) * two_pi * 4;
  var v = p5.vector.fromangle (angolo); 

15. Aggiorna l'array

La matrice di flusso viene aggiornata con l'angolo e i valori sono aumentati in modo che l'offset di ciascuna posizione sia aumentato ogni volta che si accende. Questo potrebbe sembrare complicato ma crea davvero un movimento scorrevole casuale per le particelle da seguire sullo schermo.

 v.setmagmag (1);
  Flowfield [indice] = V;
  xoff + = inc;
  }
  yoff + = inc;
  Zoff + = 0,001;
  } 

16. Aggiorna le particelle

Ora le particelle sono tutte in loop nella loro matrice. Ogni singola particella viene raccontata di seguire il campo di flusso, per aggiornare, controllare che i bordi dello schermo, spargino leggermente e infine essere disegnati sullo schermo utilizzando la funzione Mostra. Salva il file e prova "index.html" per vedere le particelle che si muovono.

 per (var i = 0; i & lt; particelle.length; i ++) {
  particelle [i] .follow (flowfield);
  particelle [i] .update ();
  particelle [i] .edges ();
  particelle [i] .scatter ();
  particelle [i] .show ();
  }
} 

17. Aggiungi il testo

Il testo è una maschera posizionata sopra la parte superiore. Per fare ciò, l'immagine corretta è posizionata sopra la parte superiore delle particelle. Aggiungi questo codice prima della categoria di chiusura della funzione Draw. Salva e controlla il browser per vedere l'effetto che lavora con il testo ora.

 Immagine (IMG, 0, 0); 

18. Rileva la posizione del mouse

La posizione del mouse è referenziata e i valori X e Y vengono mappati su angoli di laurea che possono essere spostati. Sull'asse y questo sarà da -25 a 25 e viceversa per l'asse x. Il codice rimanente deve essere posizionato dopo che l'ultimo codice è stato aggiunto, prima della fine della funzione Draw.

 Targety = Math.Round (Mappa (Mousex, 0, Larghezza, -25, 25));
TargetX = Math.Round (MAP (MOUSY, 0, Altezza, 25, -25)); 

19. Facilità al posto

La posizione di destinazione è ora data un po 'di allentamento in modo che i gradi lentamente raggiungano il loro obiettivo. Questo è stato creato utilizzando un algoritmo di allentamento classico di decollare la posizione corrente dalla destinazione e moltiplicando da un numero basso.

 VAR VX = (TARGETX - CORRRX) * 0,05;
var vy = (targety - curry) * 0,05;
Calcx + = VX;
Calcy + = VY; 

20. Scrivi il CSS

La variabile 'T' qui prende i valori calcolati e li colloca in una stringa CSS utilizzando i valori di trasformazione di rotex e rotey. La posizione corrente viene calcolata dalla posizione in cui la tela è attualmente ruotata a.

 T = 'Rotatex (' + Calcx + 'DEG) ROTAY (' + CALCY + 'DEG)';
curry = calcx;
curry = calcy; 

21. Finisci fuori

Ora il CSS viene applicato all'elemento tela in questo codice. Salva la pagina e visualizza questo nel browser. Ora il mouse aggiorna completamente la rotazione della tela in modo che si trasformi mentre il mouse si sposta. Ovviamente tutte le particelle in quello spazio si muovono con lo sullo schermo.

 canvas.style.webkitransform = t;
canvas.style.mstransform = t;
canvas.style.transform = t; 

Questo articolo è stato originariamente pubblicato su Web Designer creativo Web Design Magazine. Acquistare Edizione 271. o sottoscrivi .

Articoli Correlati:

• 70 migliori font gratuiti per i designer
• 6 passi per l'esperienza di lettura online perfetta
• Lo strumento online gratuito mostra ciò che i tuoi font possono fare