Efecte de tipografie 3D interactive

Tipografia a jucat întotdeauna o parte importantă în arsenalul instrumentelor designer, deoarece selectează tastarea potrivită care va spori mesajul și va prezenta contextul potrivit pentru ceea ce este comunicat. În ultimii opt ani, designerii web au avut capacitatea de a aduce Tipuri personalizate ca Tipografie cinetică la proiectarea lor și au un control tipografic similar față de cei care se bucură de designerii de imprimare.

Aruncați o privire la numeroasele site-uri care sunt prezentate ca titluri premiate sau primite "Site-ul zilei" și veți observa în curând că utilizarea lor de tipografie devine centrală pentru design, permițându-i să se ridice deasupra concurenței lor. Acest lucru poate varia din formularele de scrisori animate, mișcarea reactivă la interacțiunile utilizatorului, la utilizarea îndrăzneață a formularelor de tip care iau etapa centrală (păstrați fișierele dvs. de tipografie în siguranță în Stocare in cloud ).

Dacă doriți să creați un loc de atragere a atenției cu zero fuss, încercați a Builder de site-uri web de asemenea. Și asigurați-vă că performanța site-ului dvs. este optimizată cu partea de sus web hosting .

• Fonturi 3D: 9 sfaturi de tip top

În acest tutorial, efectul de tip va folosi formele literelor ca o mască pentru unele trasee de particule rapide și de curgere gratuite, care vor turna dinamic și se deplasează prin litere. Nu numai că va exista această animație frumoasă, dar, deoarece aceasta va fi redată pe HTML5 Canvas. Element, acest lucru va fi transformat în 3D pentru a se roti spre mouse în timp ce se mișcă în jurul ecranului. Acest lucru este perfect pentru anteturile site-ului sau doar când trebuie să luați atenția utilizatorului pentru un apel la acțiune.

Descărcați fișierele Tutorial aici

01. Porniți procesul

Deschideți dosarul "Start" din fișierele proiectului din codul dvs. IDE. Proiectul va începe prin crearea clasei de obiecte de particule. Aceasta va fi utilizată pentru a crea imaginile curgătoare în textul din proiect. Deschideți fișierul "Sketch.js" și adăugați următoarea variabilă pentru a începe să creați particula de bază.

 Particul de funcționare () {
  the.pos = createVector (aleatoriu (lățime), aleatoriu ((înălțime - 100)));
  acest.vel = createVector (0, 0);
  acest.acc = createVector (0, 0);
  acest.maxspeed = maxspeed;
  acest.prevpos = the.pos.copy (); 

02. Actualizați particula

Pentru a deplasa particulele, o funcție de actualizare va fi executată fiecare cadru, acest lucru va funcționa viteza particulei și accelerația la viteza. Viteza va fi în cele din urmă limitată de o variabilă globală care va fi adăugată mai târziu. Viteza este adăugată la poziția particulei individuale. Prin crearea unei particule, mai multe mii vor fi create pe ecran în orice moment.

 Acest.update = funcția () {
  acest.vel.add (unde.acc);
  acest.limit (this.maxspeed);
  the.pos.add (this.vel);
  acest.acc.mult (0);
  } 

03. Du-te cu fluxul

Pentru a da particulelor mișcarea lor curgătoare, va fi urmat un câmp de curgere generat de zgomot. Funcția creată aici permite trecerea vectorului de curgere și apoi va fi urmată, prin urmare, numele acestei funcții. Forța direcției vectorului va fi aplicată particulei.

 this.follow = funcția (vectori) {
  var x = podea (the.pos.x / scl);
  var y = podea (this.pos.y / scl);
  var index = x + y * cols;
  VAR FORCE = vectori [index];
  acest lucru. Aplicați (forța);
  } 

04. Urmați, dar nu prea îndeaproape

Pentru a opri toate particulele care se îmbogățesc împreună, care se pot întâmpla cu ușurință cu acest tip de mișcare, particulele vor avea o cantitate foarte mică de aleatorie adăugată în poziția lor. Acest lucru va cauza o cantitate ușoară de împrăștiere.

 Acest.scatter = funcția (vectori) {
  the.pos.x + = aleatoriu (-0,9, 0,9);
  this.pos.y + = aleatoriu (-0,9, 0,9);
  }
  acest lucru.Applyforce = funcția (forța) {
  acest.acc.add (forța);
  } 

05. Afișați particula

Funcția de spectacol Aici afișează particula. Primul lucru este acela de a adăuga o lovitură de un pixel a unei culori gri deschise pentru a crea linia. Linia este extrasă din poziția sa actuală până la ultima poziție pe cadrul anterior. Poziția anterioară este stocată pentru data viitoare prin buclă.

 Acest lucru.show = funcția () {
  accident vascular cerebral (180);
  accident vascular cerebral (1);
  linia (the.pos.x, this.pos.y, the.prevpos.x, the.prevpos.y);
  acest.updateprev ();
  }
  the.updateprev = funcția () {
  acest.prevpos.x = the.pos.x;
  acest.prevpos.y = the.pos.y;
  } 

06. Înfășurați în jurul valorii de

Funcția marginilor funcționează în cazul în care particula atinge marginea ecranului și, dacă da, se împrăștie în jur pentru a veni pe partea opusă. Această secțiune se referă la poziția x, astfel încât să detecteze dacă este mai mare decât lățimea ecranului, apoi trimite-o la marginea stângă și invers.

 Acest.eges = funcția () {
  dacă (the the.pos.x & gt; lățime) {
  the.pos.x = 0;
  acest.updateprev ();
  }
  dacă (the.pos.x & lt; 0) {
  the.pos.x = lățime;
  acest.updateprev ();
  } 

07. Bucurați-vă de wrapper

Acest cod este restul detectării marginii și detectează particula pe axa Y pentru partea superioară și inferioară a ecranului. Suporturile de aici înfășoară întreaga clasă de particule. Acest mijloc prin utilizarea acestei clase pot fi create multe particule.

 Dacă (this.pos.y & gt; înălțime) {
  this.pos.y = 0;
  acest.updateprev ();
  }
  dacă (this.pos.y & lt; 0) {
  the.pos.y = înălțime;
  acest.updateprev ();
  }
  }
} 

08. Faceți multe particule

Acum, deoarece particula este creată, este timpul să ne gândim la fabricarea multor particule. Pentru a face acest lucru, tot codul nostru poate merge deasupra clasei funcției particulelor. Aici sunt declarate o serie de variabile globale care să permită funcționarea sistemului. Ei vor fi chemați la diferite momente în timpul codului, astfel încât acestea pot fi apoi explorate.

 var inc = 0,1;
var scl = 100, zoff = 0;
var cols, rânduri, mișcare = 0;
Var particulele = [];
var fluxfield;
var img;
var maxspeed;
VAR T, Calcx = 0, Calcy = 0, Currx = 0, Curry = 0, TargetX = 0, Targety = 0; 

09. Setați-l totul

Funcția de configurare, declarată aici, stabilește modul în care ecranul va privi la început. Prima detectare fiind făcută este să vedeți ce este lățimea ecranului. Dacă este relativ mare, este încărcată o imagine mare, se creează panza și acest lucru este scalat prin CSS pentru a se potrivi în cadrul afișajului.

 Setup de funcții () {
  dacă (fereastrăwidth & gt; 1200) {
  img = Loadimage ("Active / Studio.png");
  VAR CANVAS = CREATECANVAS (1920, 630);
  MAXSPEED = 10,5;
  } 

10. Alte ecrane

Restul declarației IF verifică diferite rezoluții ale ecranului și încarcă o imagine care este cea mai potrivită pentru dimensiunea ecranului. Sunt create elemente asemănătoare cu dimensiuni diferite. Acest lucru este în principal pentru a opri un telefon mobil cu mai mulți pixeli decât trebuie.

 altfel dacă (fereastrăWidth & GT; 900) {
  IMG = Loadimage ("Active / Studio-Tablet-Wide.png");
  VAR CANVAS = CREATECANVAS (1200, 394);
  SCL = 60;
  maxspeed = 7;
  } altfel {
  img = Loadimage ("Active / Studio-Tablet-Tall.png");
  VAR CANVAS = CREATECANVAS (700, 230);
  scl = 40;
  maxspeed = 5;
  } 

11. Faceți o rețea

Odată ce dimensiunea ecranului este elaborată, panza este plasată în interiorul etichetei Header Div din pagina Index.html. Un număr de coloane și rânduri sunt elaborate pe baza lățimii și înălțimii; Este puțin ca o grilă invizibilă. În cele din urmă, o matrice este setată pentru câmpul de curgere.

 Canvas.Parent ("antet");
cols = podea (lățime / scl);
Rânduri = podea (înălțime / scl);
FLOWFIELD = Noua matrice (Cols); 

12. Faceți particule

Numărul de particule este configurat pe baza lățimii ecranului - dacă ecranul este de 1920 pixeli, se vor crea 2500 de particule și se mișcă în jos de acolo. A pentru buclă creează noile particule. Culoarea de fundal a ecranului este setată la aproape albul aproape.

 var numparticles = matemath.floor ((2500/1920) * Lățime);
  pentru (var i = 0; i & lt; numparticles; i ++) {
  particule [i] = particulă nouă ();
  }
  fundal (245);
} 

13. Desenați ecranul

Rezultatele tuturor calculelor sunt trase pe ecran fiecare cadru din funcția de tragere. În primul rând, un dreptunghi deschis gri, cu o opacitate foarte scăzută umple ecranul să se estompeze ceea ce a fost tras anterior. După aceea, este desenată, umplerea este oprită, deoarece particulele vor fi alcătuite din curse care nu se umple.

 Draw Function () {
  nostroke ();
  umpleți (245, 10);
  rect (0, 0, lățime, înălțime);
  nofill ();
  var yoff = 0; 

14. Creați un efect de debit

Pentru a obține efectul de curgere, există două bucle "pentru" în mișcare prin rânduri și coloane pentru a actualiza valorile de zgomot. Acestea sunt apoi schimbate în unghiuri de valoarea de zgomot gata pentru a actualiza particulele pentru fiecare dintre pozițiile de pe ecran.

 pentru (var y = 0; y & lt; rânduri; y ++) {
  var xoff = 0;
  pentru (var x = 0; x & lt; cols; x ++) {
  VAR index = (x + y * cols);
  Var Angle = zgomot (XOFF, YOFF, ZOFF) * Două_pi * 4;
  var v = p5.vector.fromgle (unghi); 

15. Actualizați matricea

Gama de flux este actualizată cu unghiul și valorile sunt crescute astfel încât compensarea fiecărei poziții să fie mărit de fiecare dată când crește. Acest lucru poate părea complicat, dar într-adevăr creează doar o mișcare de curgere aleatorie pentru particulele să urmeze pe ecran.

 V.Setmag (1);
  Flowfield [index] = V;
  xoff + = Inc;
  }
  yoff + = inc;
  zoff + = 0,001;
  } 

16. Actualizați particulele

Acum, particulele sunt înmuiate în matricea lor. Fiecare particulă individuală este informată să urmeze câmpul de curgere, să se actualizeze, să verifice marginile ecranului, să se împrăștie ușor și în final, să fie trasați pe ecran utilizând funcția de spectacol. Salvați fișierul și testați "index.html" pentru a vedea particulele care se deplasează.

 pentru (var i = 0; i & lt; particule.Length; I ++) {
  Particulele [I] .follow (Flowfield);
  particule [i] .Update ();
  particulele [i] .de ();
  particulele [i] .schetter ();
  particulele [i] .show ();
  }
} 

17. Adăugați textul

Textul este o mască care este plasată în partea de sus. Pentru a face acest lucru, imaginea corectă este plasată pe partea de sus a particulelor. Adăugați acest cod înainte de închiderea funcției de tragere. Salvați și verificați browserul pentru a vedea efectul care funcționează cu textul acum.

 Imagine (IMG, 0, 0); 

18. Detectați poziția mouse-ului

Poziția mouse-ului este menționată, iar valorile X și Y sunt cartografiate pe unghiurile de grad care pot fi mutate. Pe axa Y acest lucru va fi de -25 până la 25 și invers pentru axa X. Codul rămas trebuie plasat după adăugarea ultimului cod, înainte de sfârșitul funcției de tragere.

 țintă = matemath.round (hartă (mousex, 0, lățime, -25, 25));
Targex = Math.round (hartă (mouse-ul, 0, înălțime, 25, -25)); 

19. Ușurința în loc

Poziția țintă este acum dată puțin ușurință, astfel încât gradele să ajungă încet ținta lor. Acest lucru este creat folosind un algoritm clasic de relaxare de a scoate poziția curentă de la destinație și înmulțirea cu un număr scăzut.

 VAR VX = (TARGETX - CURRX) * 0,05;
var vy = (țintă - curry) * 0,05;
calcx + = vx;
calcy + = vy; 

20. Scrieți CSS

Variabila "T" ia valorile calculate și le plasează într-un șir CSS utilizând valorile de transformare ale rotitexului și rotitorului. Poziția curentă este calculată din poziția Canvasul este în prezent rotit.

 T = 'ROTATEX (' + CALCX + 'DEG) ROTTEY (' + CALCY + 'DEG)';
currx = calx;
curry = calcy; 

21. Finalizați oprit

Acum, CSS este aplicat elementului de panza din acest cod. Salvați pagina și previzualizați acest lucru în browser. Acum, mouse-ul actualizează pe deplin rotirea pânzei, astfel încât să se transforme când mouse-ul se mișcă. Desigur, toate particulele din acel spațiu se mișcă cu el pe ecran.

 Canvas.Style.webkittransform = t;
canvas.style.mstransform = t;
canvas.style.transform = t; 

Acest articol a fost inițial publicat în Creative Web Design Magazine Web Designer. Cumpără Problema 271. sau Abonati-va .

Articole similare:

• 70 cele mai bune fonturi gratuite pentru designeri
• 6 pași pentru experiența perfectă de citire online
• Instrumentul online gratuit vă arată ce pot face fonturile dvs.