Lag interaktive 3D-typografiske effekter

Typografi har alltid spilt en stor rolle i enhver designers arsenal av verktøy som de velger riktig skrifttype som vil forbedre meldingen og presentere den rette konteksten for hva som kommuniseres. I løpet av de siste åtte årene har webdesignere hatt muligheten til å bringe inn Egendefinerte skrifttyper som for eksempel kinetisk typografi til deres design og har lignende typografisk kontroll til de som nytes av utskriftsdesignere.

Ta en titt på mange av nettstedene som er omtalt som prisbelønte eller mottar 'Nettstedet på dagens titler, og du vil snart legge merke til at deres bruk av typografi blir sentral for designet, slik at de kan stige over konkurransen deres. Dette kan variere fra animerte brevformer, reaktiv bevegelse til brukerinteraksjonene, til fet skrift av typen skjemaer som tar senterfasen (hold dine typografiske filer trygge i skylagring ).

Hvis du vil opprette et oppmerksomhetsgripende nettsted med nulloppstyr, prøv en Nettstedbygger også. Og vær sikker på at nettstedets ytelse er optimalisert med topp Web Hosting. .

• 3D-fonter: 9 Topptype Tips

I denne opplæringen vil typen effekten bruke figurene til bokstavene som en maske til noen raske, frittflytende partikler stier som dynamisk virvler og beveger seg gjennom bokstavene. Ikke bare vil det være denne vakre animasjonen, men som dette vil bli gjengitt på HTML5 Canvas Element, dette vil bli forvandlet i 3D for å rotere mot musen når den beveger seg rundt skjermen. Dette er perfekt for nettstedshoder eller bare når du trenger å hente brukerens oppmerksomhet for en samtale til handling.

Last ned opplæringsfilene her

01. Start prosessen

Åpne "Start" -mappen fra prosjektfilene i koden din. Prosjektet skal begynne med å skape partikkelobjektklassen. Dette vil bli brukt til å skape det flytende bilder i teksten i prosjektet. Åpne "Sketch.js" -filen og legg til følgende variabel for å begynne å skape basispartikkelen.

 Funksjonspartikkel () {
  this.pos = createvektor (tilfeldig (bredde), tilfeldig ((høyde - 100)));
  this.vel = createvektor (0, 0);
  this.acc = createvektor (0, 0);
  this.maxspeed = maxspeed;
  dette.Prevpos = this.pos.copy (); 

02. Oppdater partikkelen

For å flytte partikkelen, vil en oppdateringsfunksjon kjøres hver ramme, dette vil utarbeide hastigheten til partikkelen og akselerasjonen til hastigheten. Hastigheten vil etter hvert bli begrenset av en global variabel som vil bli lagt til senere. Hastigheten tilsettes til stillingen til den enkelte partikkel. Ved å skape en partikkel, vil flere tusen opprettes på skjermen på en gang.

 this.update = funksjon () {
  this.vel.add (this.acc);
  this.vel.Limit (dette.maxspeed);
  this.pos.add (this.vel);
  this.acc.mult (0);
  } 

03. Gå med strømmen

For å gi partiklene deres flytende bevegelse, vil et strømningsfelt generert av støy bli fulgt. Funksjonen som er opprettet her, gjør det mulig for vektoren som skal sendes inn, og den vil da bli fulgt, derav navnet på denne funksjonen. Kraften til vektorretningen vil bli påført partikkelen.

 this.follow = funksjon (vektorer) {
  var x = gulv (denne.pos.x / scl);
  var y = gulv (dette.pos.y / scl);
  var indeks = x + y * cols;
  var kraft = vektorer [indeks];
  this.applyforce (Force);
  } 

04. Følg men ikke for tett

For å stoppe alle partiklene som bærer sammen, som lett kan skje med denne typen bevegelse, vil partiklene ha en svært liten mengde tilfeldighet tilsatt til deres posisjon. Dette vil føre til at en liten mengde spredning oppstår.

 this.scatter = funksjon (vektorer) {
  this.pos.x + = tilfeldig (-0,9, 0,9);
  denne.pos.y + = tilfeldig (-0,9, 0,9);
  }
  this.applyforce = funksjon (kraft) {
  this.acc.add (kraft);
  } 

05. Vis partikkelen

Visfunksjonen her viser partikkelen. Det første det gjør er å legge til et en pikselslag av en lys grå farge for å lage linjen. Linjen er trukket fra sin nåværende posisjon til sin siste posisjon på forrige ramme. Den forrige posisjonen er lagret for neste gang gjennom løkken.

 this.show = funksjon () {
  slag (180);
  strokevekt (1);
  linje (denne.pos.x, dette.pos.y, dette.Prev.x, dette.Prev.y);
  dette.Updateprev ();
  }
  this.updateprev = funksjon () {
  this.prevpos.x = this.pos.x;
  this.Prev.y = this.pos.y;
  } 

06. Wrap rundt

Kantene fungerer ut hvis partikkelen når kanten på skjermen, og i så fall vikler det seg rundt for å komme på motsatt side. Denne delen omhandler X-posisjonen, slik at den oppdages om den er større enn bredden på skjermen og sender den til venstre kant og omvendt.

 this.edges = funksjon () {
  hvis (dette.pos.x & gt; bredde) {
  this.pos.x = 0;
  dette.Updateprev ();
  }
  hvis (dette.pos.x & lt; 0) {
  this.pos.x = bredde;
  dette.Updateprev ();
  } 

07. Wrapper's Delight

Denne koden er resten av kantdeteksjonen, og den oppdager partikkelen på Y-aksen for toppen og bunnen av skjermen. Brakettene her vikler opp hele partikkelklassen. Dette betyr at man bruker denne klassen, kan mange partikler opprettes.

 hvis (dette.pos.y & gt; høyde) {
  this.pos.y = 0;
  dette.Updateprev ();
  }
  hvis (dette.pos.y & lt; 0) {
  this.pos.y = høyde;
  dette.Updateprev ();
  }
  }
} 

08. Lag mange partikler

Nå som partikkelen er opprettet, er det på tide å tenke på å lage mange partikler. For å gjøre dette kan hele vår kode gå over partikkelfunksjonsklassen. Her blir en rekke globale variabler deklarert for å gjøre det mulig for systemet å kjøre. De blir kalt på forskjellige tidspunkter under koden, slik at de deretter kan utforskes.

 var inc = 0,1;
var scl = 100, zoff = 0;
var cols, rader, bevegelse = 0;
VAR-partikler = [];
Var Flowfield;
var img;
Var maxspeed;
var t, calcx = 0, kalsy = 0, currx = 0, karri = 0, målx = 0, målrettet = 0; 

09. Sett alt opp

Oppsettfunksjonen, deklarert her, setter hvordan skjermen vil se på starten. Den første deteksjonen som gjøres er å se hva bredden på skjermen er. Hvis det er relativt stort, er et stort bilde lastet, lerretet er opprettet, og dette er skalert via CSS for å passe inn i displayet.

 Funksjonsoppsett () {
  hvis (windowwidth & gt; 1200) {
  img = loadimage ("eiendeler / studio.png");
  var lerret = createcanvas (1920, 630);
  maxspeed = 10,5;
  } 

10. Andre skjermer

Resten av if-setningen kontrollerer forskjellige skjermoppløsninger og laster et bilde som passer best for den skjermstørrelsen. På samme måte opprettes forskjellige lerretselementer. Dette er hovedsakelig å stoppe en mobil som omhandler flere piksler enn det må.

 ellers hvis (Windowwidth & GT; 900) {
  img = loadimage ("Eiendeler / Studio-Tablet-Wide.png");
  var lerret = createcanvas (1200, 394);
  scl = 60;
  maxspeed = 7;
  } else {
  img = loadimage ("Eiendeler / Studio-Tablet-Tall.png");
  var lerret = createcanvas (700, 230);
  scl = 40;
  maxspeed = 5;
  } 

11. Lag et rutenett

Når skjermstørrelsen er utarbeidet, er lerretet plassert inne i header-div-taggen i index.html-siden. En rekke kolonner og rader er utarbeidet basert på bredden og høyden; Det er litt som et usynlig rutenett. Endelig er en matrise satt for flytfeltet.

 lerret. Parent ('header');
cols = gulv (bredde / scl);
rader = gulv (høyde / scl);
Flowfield = Ny array (Cols); 

12. Lag partikler

Antall partikler er satt opp basert på bredden på skjermen - hvis skjermen er 1920 piksler bred, vil 2500 partikler bli opprettet og det beveger seg nedover derfra. A for loop skaper de nye partiklene. Bakgrunnsfargen på skjermen er satt til nesten full hvit.

 var Numparticles = Math.Floor ((2500/1920) * Bredde);
  for (var i = 0; i og ++) {
  partikler [i] = ny partikkel ();
  }
  bakgrunn (245);
} 

13. Tegn skjermen

Resultatene av alle beregningene er trukket på skjermen hver ramme i tegningsfunksjonen. For det første fyller et lysegrå rektangel med en svært lav opacitet på skjermen for å falme det som tidligere er trukket. Etter at dette er tegnet, er fyllingen slått av når partiklene vil bestå av slag ikke fyller.

 Funksjon Tegn () {
  nesebor ();
  fyll (245, 10);
  rette (0, 0, bredde, høyde);
  nofill ();
  var yoff = 0; 

14. Opprett en strømningseffekt

For å få strømningseffekten er det to 'for' sløyfer som beveger seg gjennom rader og kolonner for å oppdatere støyverdiene. Disse blir deretter endret i vinkler fra støyverdien klar til å oppdatere partiklene for hver av posisjonene på skjermen.

 for (var y = 0; y & lt; rader; y ++) {
  var xoff = 0;
  for (var x = 0; x & lt; cols; x ++) {
  var indeks = (x + y * cols);
  var vinkel = støy (Xoff, Yoff, Zoff) * Two_pi * 4;
  var v = p5.Vector.fromangle (vinkel); 

15. Oppdater matrisen

Strømmen av strømmen er oppdatert med vinkelen og verdiene økes, slik at forskyvningen av hver posisjon økes hver gang den går opp. Dette kan virke komplisert, men det skaper egentlig bare tilfeldig flytende bevegelse for partiklene å følge på skjermen.

 v.SetMag (1);
  Flowfield [Index] = V;
  Xoff + = Inc;
  }
  Yoff + = Inc;
  zoff + = 0,001;
  } 

16. Oppdater partiklene

Nå blir partiklene slått gjennom i deres matrise. Hver enkelt partikkel blir fortalt å følge flytfeltet, for å oppdatere, kontroller kantene på skjermen, sprer seg litt og til slutt trekkes på skjermen ved hjelp av showfunksjonen. Lagre filen og test 'index.html' for å se partiklene som beveger seg om.

 for (var I = 0; i & lt; partikler.length; i ++) {
  partikler [i]. Følg (Flowfield);
  partikler [i] .Update ();
  partikler [i] .edges ();
  partikler [i] .scatter ();
  partikler [i] .show ();
  }
} 

17. Legg til teksten

Teksten er en maske som er plassert over toppen. For å gjøre dette, er det riktige bildet plassert over toppen av partiklene. Legg til denne koden før avslutningsbrakten på Draw-funksjonen. Lagre og sjekk nettleseren for å se effekten som arbeider med teksten nå.

 bilde (img, 0, 0); 

18. Oppdag museposisjonen

Musposisjonen er referert, og x- og y-verdiene er kartlagt på graders vinkler som kan flyttes. På Y-aksen vil dette være -25 til 25 og omvendt for X-aksen. Resterende kode skal plasseres etter at den siste koden ble lagt til, før slutten av tegningsfunksjonen.

 Targety = Math.Round (Map (Mousex, 0, Bredde, -25, 25));
Targetx = Math.Round (Map (Mousey, 0, Høyde, 25, -25)); 

19. Lett på plass

Målposisjonen er nå gitt litt lettelse slik at grader sakte når målet. Dette er opprettet ved hjelp av en klassisk lettelsesalgoritme for å ta av den nåværende posisjonen fra destinasjonen og multiplisere med et lavt antall.

 var vx = (målx - currx) * 0,05;
var vy = (målrettet - karri) * 0,05;
calcx + = vx;
kalsy + = vy; 

20. Skriv CSS

Den "T" -variabelen her tar de beregnede verdiene og plasserer dem i en CSS-streng ved hjelp av transformasjonsverdiene for ROTATEX og ROTATEY. Den nåværende posisjonen er beregnet fra stillingen Lerretet roteres for tiden til.

 t = 'rotatex (' + calcx + 'deg) rotatey (' + kalsy + 'deg)';
currx = calcx;
karri = kalsy; 

21. Fullfør av

Nå er CSS påført lerretelementet i denne koden. Lagre siden og forhåndsvisning dette i nettleseren. Nå oppdaterer musen fullt ut rotasjonen av lerretet slik at det vender seg som musen beveger seg. Selvfølgelig flytter alle partiklene i den plassen med den på skjermen.

 lerret.style.webkittransform = t;
canvas.style.mstransform = t;
canvas.style.transform = t; 

Denne artikkelen ble opprinnelig publisert i Creative Web Design Magazine webdesigner. Kjøpe utgave 271. eller abonnere .

Relaterte artikler:

• 70 beste gratis skrifttyper for designere
• 6 trinn til den perfekte online leseopplevelsen
• Gratis Internett-verktøy viser deg hva dine skrifttyper kan gjøre