Lav interaktive 3D-typografi-effekter

Typografi har altid spillet en stor rolle i enhver designerens arsenal af værktøjer, da de vælger det rigtige skrifttype, der vil forbedre meddelelsen og præsentere den rigtige kontekst for, hvad der kommunikeres. I løbet af de sidste otte år har webdesignere haft evnen til at bringe ind brugerdefinerede skrifttyper såsom kinetisk typografi. til deres design og har lignende typografisk kontrol til dem, der nyder af print designere.

Tag et kig på mange af de websteder, der findes som prisvindende eller modtage 'Site of the Day' titler, og du vil snart bemærke, at deres brug af typografi bliver centralt for designet, så de kan stige over deres konkurrence. Dette kan variere fra animerede brevformularer, reaktiv bevægelse til brugerinteraktionerne, for at drive brug af typeformer, der tager centerfase (Hold dine typografifiler sikkert i Sky lagring ).

Hvis du vil oprette en opmærksomhed greb site med nul fuss, prøv en Website Builder. også. Og vær sikker på, at dit websteds præstation er optimeret med toppen Web Hosting. .

• 3D skrifttyper: 9 Top type tips

I denne tutorial vil typen effekt bruge figurerne af bogstaverne som en maske til nogle hurtige, fritflydende partikler stier, der vil dynamisk hvirvel og flytte gennem bogstaverne. Ikke kun vil der være denne smukke animation, men da dette vil blive gjort på HTML5 Canvas. element, dette vil blive transformeret i 3D for at rotere mod musen, da det bevæger sig rundt på skærmen. Dette er perfekt til webladerne eller lige når du har brug for at få fat i brugerens opmærksomhed for et opkald til handling.

Download vejledningsfilerne her

01. Start processen

Åbn 'Start' -mappen fra projektfilerne i din kode IDE. Projektet skal starte med at oprette partikelobjektklassen. Dette vil blive brugt til at skabe det flydende billeder inden for teksten i projektet. Åbn "Sketch.js" -filen og tilføj følgende variabel for at begynde at oprette basispartiklen.

 Funktionspartikel () {
  this.pos = createvector (tilfældig (bredde), tilfældig ((højde - 100)));
  this.vel = createvector (0, 0);
  this.acc = createvector (0, 0);
  this.maxspeed = maxspeed;
  this.prevpos = this.pos.copy (); 

02. Opdater partiklen

For at flytte partiklen vil en opdateringsfunktion blive kørt hver ramme, dette vil udarbejde partikelets hastighed og acceleration til hastigheden. Hastigheden vil i sidste ende være begrænset af en global variabel, som vil blive tilføjet senere. Hastigheden tilsættes til positionen af ​​den enkelte partikel. Ved at oprette en partikel, vil flere tusinde blive oprettet på skærmen til enhver tid.

 this.update = funktion () {
  this.vel.add (this.acc);
  this.vel.limit (this.maxspeed);
  this.pos.add (this.vel);
  denne.acc.mult (0);
  } 

03. Gå med strømmen

For at give partiklerne deres flydende bevægelse vil et strømningsfelt genereret af støj blive fulgt. Funktionen, der er oprettet her, gør det muligt for vektoren af ​​strømning, der skal passeres, og den vil blive fulgt, dermed navnet på denne funktion. Kraften af ​​vektorretningen vil blive påført på partiklen.

 this.follow = funktion (vektorer) {
  Var x = gulv (this.pos.x / SCL);
  Var y = gulv (this.pos.y / SCL);
  VAR index = x + y * cols;
  Var Force = Vektorer [Index];
  denne.applyforce (kraft);
  } 

04. Følg, men ikke for tæt

For at stoppe alle partiklerne, der bunker sammen, hvilket let kan ske med denne form for bevægelse, vil partiklerne have en meget lille mængde tilfældighed tilsat til deres position. Dette vil medføre, at der opstår en lille mængde spredning.

 this.scatter = funktion (vektorer) {
  this.pos.x + = tilfældig (-0,9, 0,9);
  this.pos.y + = tilfældig (-0,9, 0,9);
  }
  denne.Applyforce = funktion (kraft) {
  this.acc.add (kraft);
  } 

05. Vis partiklen

Visningsfunktionen her viser partiklen. Det første, det gør, er at tilføje en one pixel slagtilfælde af en lysegrå farve for at skabe linjen. Linjen er trukket fra sin nuværende position til sin sidste position på den forrige ramme. Den foregående position gemmes til næste gang gennem løkken.

 this.show = funktion () {
  slagtilfælde (180);
  Strokeweight (1);
  linje (this.pos.x, this.pos.y, this.prevppos.x, this.prevpos.y);
  this.updateprev ();
  }
  this.updateprev = funktion () {
  this.prevp poss.x = this.pos.x;
  this.prevpos.y = this.pos.y;
  } 

06. Wrap around

Kanterne fungerer ud, hvis partiklen når kanten af ​​skærmen, og i bekræftende fald ombrydes den rundt for at komme på den modsatte side. Dette afsnit omhandler X-positionen, så det registrerer, om det er større end skærmen på skærmen og sender den til venstre kant og omvendt.

 this.edges = funktion () {
  hvis (this.pos.x & gt; bredde) {
  this.pos.x = 0;
  this.updateprev ();
  }
  hvis (this.pos.x & lt; 0) {
  this.pos.x = bredde;
  this.updateprev ();
  } 

07. Wrapper's Delight

Denne kode er resten af ​​kantdetektionen, og den registrerer partiklen på Y-aksen for toppen og bunden af ​​skærmen. Parenteterne her pakker op hele partikelklassen. Dette betyder ved at bruge denne klasse mange partikler kan oprettes.

 hvis (this.pos.y & gt; højde) {
  this.pos.y = 0;
  this.updateprev ();
  }
  hvis (this.pos.y & lt; 0) {
  this.pos.y = højde;
  this.updateprev ();
  }
  }
} 

08. Lav mange partikler

Nu da partiklen er skabt, er det tid til at tænke på at lave mange partikler. For at gøre dette kan hele vores kode gå over partikelfunktionsklassen. Her erklæres en række globale variabler for at gøre det muligt for systemet at køre. De bliver kaldt på forskellige tidspunkter under koden, så de kan derefter udforskes.

 var inc = 0,1;
Var SCL = 100, ZOff = 0;
Var kols, rækker, bevægelse = 0;
var partikler = [];
Var Flowfield;
Var img;
var maxspeed;
Var t, calcx = 0, calcy = 0, curx = 0, curry = 0, targetx = 0, target = 0; 

09. Sæt det hele

Setup-funktionen, der er angivet her, angiver, hvordan skærmen vil se på starten. Den første detektion, der gøres, er at se, hvad skærmens bredde er. Hvis det er relativt stort, er et stort billede indlæst, lærredet oprettes, og dette skaleres via CSS, der passer ind i displayet.

 Funktionsopsætning () {
  hvis (Windowwidth & GT; 1200) {
  img = last 1 ("Aktiver / studio.png");
  Var Canvas = CreateCanvas (1920, 630);
  maxspeed = 10.5;
  } 

10. Andre screens.

Resten af ​​IF-sætningen kontrollerer forskellige skærmopløsninger og indlæser et billede, der er mest hensigtsmæssigt for den skærmstørrelse. Tilsvarende er der skabt forskellige lærredselementer. Dette er primært at stoppe en mobil, der beskæftiger sig med flere pixels end den skal.

 ellers hvis (Windowwidth & GT; 900) {
  img = lastbillede ("Aktiver / studio-tablet-wide.png");
  Var Canvas = CreateCanvas (1200, 394);
  SCL = 60;
  maxspeed = 7;
  } ellers {
  img = lastbillede ("Aktiver / studio-tablet-tall.png");
  Var Canvas = CreateCanvas (700, 230);
  SCL = 40;
  maxspeed = 5;
  } 

11. Lav et net

Når skærmstørrelsen er udarbejdet, er lærredet placeret inde i header div-mærket i indekset.html-siden. En række kolonner og rækker udarbejdes ud fra bredden og højden; Det er lidt som et usynligt gitter. Endelig er der indstillet en matrix til flowfeltet.

 Canvas.parent ('Header');
cols = gulv (bredde / SCL);
rækker = gulv (højde / SCL);
Flowfield = New Array (Cols); 

12. Gør partikler

Antallet af partikler er oprettet baseret på skærmens bredde - hvis skærmen er 1920 pixels bred, vil 2500 partikler blive skabt, og den bevæger sig nedad derfra. A til loop skaber de nye partikler. Baggrundsfarven på skærmen er indstillet til næsten fuld hvid.

 Var NumParticles = Math.floor ((2500/1920) * Bredde);
  for (var I = 0; I & LT; NumParticles; I ++) {
  partikler [i] = ny partikel ();
  }
  Baggrund (245);
} 

13. Tegn skærmen

Resultaterne af alle beregningerne trækkes på skærmen hver ramme i trækfunktionen. For det første fylder et lysegråt rektangel med en meget lav opacitet skærmen for at fade, hvad der er trukket tidligere. Efter at dette er tegnet, slukkes fyldningen, da partiklerne vil bestå af slagtilfælde, ikke fylder.

 Funktion Draw () {
  nostroke ();
  fyld (245, 10);
  rart (0, 0, bredde, højde);
  nofill ();
  var yoff = 0; 

14. Opret en strømningseffekt

For at få strømningseffekten er der to 'for' sløjfer, der bevæger sig gennem rækkerne og kolonnerne for at opdatere støjværdierne. Disse ændres derefter til vinkler fra støjværdien klar til at opdatere partiklerne for hver af positionerne på skærmen.

 for (var y = 0; y & lt; rækker; y ++) {
  var xoff = 0;
  for (var x = 0; x & lt; cols; x ++) {
  VAR index = (x + y * kol);
  VAR ANGLE = Støj (Xoff, Yoff, ZOff) * two_pi * 4;
  var v = p5.vector.fromangle (vinkel); 

15. Opdater arrayet

Arrayet af strømning opdateres med vinklen, og værdierne øges, så forskydningen af ​​hver position øges hver gang den går op. Dette kan virke kompliceret, men det skaber virkelig bare tilfældigt flydende bevægelse, som partiklerne skal følge på skærmen.

 v.setmag (1);
  Flowfield [Index] = V;
  xoff + = inc;
  }
  yoff + = inc;
  zoff + = 0,001;
  } 

16. Opdater partiklerne

Nu er partiklerne alle looped igennem i deres array. Hver enkelt partikel bliver bedt om at følge flowfeltet, for at opdatere, kontrollere kanterne på skærmen, scatter lidt og til sidst trækkes på skærmen ved hjælp af showfunktionen. Gem filen og test 'index.html' for at se partiklerne, der bevæger sig om.

 for (var I = 0; I & LT; partikler.Længde; i ++) {
  partikler [i] .follow (flowfield);
  partikler [i] .update ();
  partikler [i] .edges ();
  partikler [i] .Scatter ();
  partikler [i] .show ();
  }
} 

17. Tilføj teksten

Teksten er en maske, der er placeret over toppen. For at gøre dette placeres det rigtige billede over toppen af ​​partiklerne. Tilføj denne kode før afslutningen af ​​tegnefunktionen. Gem og tjek browseren for at se effekten, der arbejder med teksten nu.

 billede (img, 0, 0); 

18. Registrér musens position

Muspositionen henvises til, og X- og Y-værdierne er kortlagt på gradsvinkler, der kan flyttes. På Y-aksen vil dette være -25 til 25 og omvendt til X-aksen. Den resterende kode skal placeres, efter at den sidste kode blev tilføjet, inden udgangen af ​​tegnefunktionen.

 TARGETY = Math.Round (MAP (MOUSEX, 0, Bredde, -25, 25));
targetx = math.round (kort (mousey, 0, højde, 25, -25)); 

19. Nem på plads

Målpositionen er nu givet lidt lempelse, så graderne langsomt når deres mål. Dette er skabt ved hjælp af en klassisk lette algoritme for at tage den aktuelle position fra destinationen og multiplicere med et lavt nummer.

 VAR VX = (TARGETX - CURX) * 0,05;
Var Vy = (Targety - Curry) * 0,05;
calcx + = vx;
calcy + = vy; 

20. Skriv CSS

"T'-variablen her tager de beregnede værdier og placerer dem i en CSS-streng ved hjælp af transformværdierne for Rotatex og Rotatey. Den aktuelle position beregnes ud fra den position, lærredet er drejet i øjeblikket til.

 t = 'ROTATEX (' + CALCX + 'DEG) ROTATEY (' + CALCY + 'DEG)';
curx = calcx;
curry = calcy; 

21. Afslut off.

Nu anvendes CSS på lærredelementet i denne kode. Gem siden og forhåndsvisning af dette i browseren. Nu opdaterer musen fuldt ud drejningen af ​​lærredet, så den vender som musen bevæger sig. Selvfølgelig flytter alle partiklerne i det rum med det på skærmen.

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

Denne artikel blev oprindeligt offentliggjort i Creative Web Design Magazine Web Designer. Købe Udgave 271. eller abonnere .

Relaterede artikler:

• 70 bedste gratis skrifttyper til designere
• 6 trin til den perfekte online læseroplevelse
• Gratis online værktøj viser dig, hvad dine skrifttyper kan gøre