Gör interaktiva 3D-typografi effekter

Typografi har alltid spelat en stor roll i någon designers arsenal av verktyg, eftersom de väljer rätt typsnitt som kommer att förbättra meddelandet och presentera det rätta sammanhanget för vad som kommuniceras. Under de senaste åtta åren har webbdesigners haft möjlighet att ta med sig anpassade typsnitt Till exempel Kinetisk typografi till deras design och har liknande typografisk kontroll till de som skrivs av tryckdesigners.

Ta en titt på många av de webbplatser som presenteras som prisbelönta eller ta emot "-platsen av dagens titlar och du kommer snart att meddela att deras användning av typografi blir centralt för designen, så att de kan stiga över sin tävling. Detta kan sträcka sig från animerade brevformer, reaktiv rörelse till användarinteraktionerna, med djärv användning av typformulär som tar centrumsteget (behåll dina typografifiler säkra i molnlagring ).

Om du vill skapa en uppmärksamhetsplats med nollkärl, prova en Website Builder för. Och var noga med att webbplatsens prestanda är optimerad med toppen webbhotell .

• 3D-teckensnitt: 9 Topptyp Tips

I den här handledningen kommer typseffekten att använda formerna av bokstäverna som en mask till några snabba, fritt flytande partiklar spår som dynamiskt virvlar och flyttar igenom bokstäverna. Inte bara kommer det att finnas den här vackra animationen, men eftersom det kommer att bli gjorda på HTML5 Canvas Element, detta kommer att omvandlas i 3D för att rotera mot musen när den rör sig runt skärmen. Detta är perfekt för platshuvuden eller bara när du behöver ta tag i användarens uppmärksamhet åt ett samtal till handling.

Ladda ner de handledningsfilerna här

01. Starta processen

Öppna "Start" -mappen från projektfilerna i din kod IDE. Projektet kommer att börja med att skapa partikelobjektklassen. Detta kommer att användas för att skapa flödande bilder i texten i projektet. Öppna filen "Sketch.js" och lägg till följande variabel för att börja skapa baspartikeln.

 Funktionspartikel () {
  This.pos = creameVector (slumpmässig (bredd), slumpmässig ((höjd - 100)));
  This.Vel = creameVector (0, 0);
  This.acc = creameVector (0, 0);
  this.maxspeed = maxspeed;
  this.prevpos = this.pos.copy (); 

02. Uppdatera partikeln

För att flytta partikeln kommer en uppdateringsfunktion att köras varje ram, det här kommer att fungera i partikelhastigheten och accelerationen till hastigheten. Hastigheten kommer så småningom att begränsas av en global variabel som kommer att läggas till senare. Hastigheten läggs till positionen för den enskilda partikeln. Genom att skapa en partikel kommer flera tusen att skapas på skärmen vid någon tidpunkt.

 this.Update = funktion () {
  this.vel.add (This.acc);
  this.vel.limit (denna.maxspeed);
  this.pos.add (detta.vel);
  This.acc.mult (0);
  } 

03. Gå med flödet

För att ge partiklarna deras flytande rörelse följs ett flödesfält som genereras av brus. Funktionen som skapats här gör det möjligt för vektorn att gå vidare och det kommer då att följas, följaktligen namnet på den här funktionen. Vektorriktningen kommer att appliceras på partikeln.

 This.Follow = Funktion (vektorer) {
  var x = golv (this.pos.x / scl);
  var y = golv (this.pos.y / scl);
  varindex = x + y * cols;
  Var Force = Vektorer [Index];
  denna .ApplyForce (kraft);
  } 

04. Följ men inte för nära

För att stoppa alla partiklar som bunter upp tillsammans, som lätt kan hända med denna typ av rörelse, kommer partiklarna att ha en mycket liten mängd slumpmässighet som läggs till sin position. Detta kommer att leda till att en liten mängd spridning förekommer.

 This.scatter = Funktion (vektorer) {
  this.pos.x + = slumpmässigt (-0,9, 0,9);
  this.pos.y + = slumpmässigt (-0,9, 0,9);
  }
  this.applyForce = funktion (kraft) {
  this.acc.add (kraft);
  } 

05. Visa partikeln

Visningsfunktionen här visar partikeln. Det första som det gör är att lägga till en pixelslag av en ljusgrå färg för att skapa linjen. Linjen dras från sin nuvarande position till sin sista position på föregående ram. Den föregående positionen lagras för nästa gång genom slingan.

 This.Show = Funktion () {
  stroke (180);
  strokeweight (1);
  linje (this.pos.x, this.pos.y, this.prevpos.x, this.prevpos.y);
  this.updateprev ();
  }
  this.updateprev = funktion () {
  this.prevpos.x = this.pos.x;
  this.prevpos.y = This.pos.y;
  } 

06. Vik runt

Kanterfunktionen fungerar om partikeln når kanten på skärmen och, om så är fallet, vrider den runt för att komma på motsatt sida. Det här avsnittet behandlar X-läget så det detekterar om det är större än bredden på skärmen och skickar den till vänster kant och vice versa.

 This.Edges = Funktion () {
  om (this.pos.x & gt; width) {
  this.pos.x = 0;
  this.updateprev ();
  }
  om (this.pos.x & lt; 0) {
  this.pos.x = bredd;
  this.updateprev ();
  } 

07. Wrapper's Delight

Denna kod är återstoden av kantdetektering och det detekterar partikeln på Y-axeln för topp och botten av skärmen. Fästena här lindrar hela partikelklassen. Det betyder att man använder denna klass många partiklar kan skapas.

 Om (This.Pos.Y & GT; höjd) {
  this.pos.y = 0;
  this.updateprev ();
  }
  Om (This.Pos.Y & LT; 0) {
  this.pos.y = höjd;
  this.updateprev ();
  }
  }
} 

08. Gör många partiklar

Nu när partikeln skapas är det dags att tänka på att göra många partiklar. För att göra detta kan all vår kod gå över partikelfunktionsklassen. Här förklaras ett antal globala variabler för att systemet ska kunna köra. De kommer att ringas på olika tider under koden, så de kan sedan undersökas.

 VARC = 0,1;
VAR SCL = 100, ZOFF = 0;
var cols, rader, rörelse = 0;
var partiklar = [];
var flowfield;
var img;
var maxspeed;
Var t, Calcx = 0, Calcy = 0, Currx = 0, Curry = 0, Targetex = 0, Targety = 0; 

09. Ställ in allt

Inställningsfunktionen, som deklarerats här, ställer hur skärmen ska titta på början. Den första detekteringen är klar är att se vad bredden på skärmen är. Om det är relativt stort är en stor bild laddad, duken skapas och detta är skalat via CSS som passar inuti displayen.

 Funktionsinställningar () {
  Om (WindowWidth & GT; 1200) {
  IMG = loadimage ("tillgångar / studio.png");
  Var Canvas = CreateCanvas (1920, 630);
  maxspeed = 10,5;
  } 

10. Andra skärmar

Resten av IF-satsen kontrollerar olika skärmupplösningar och laddar en bild som är mest lämplig för den skärmstorleken. På samma sätt skapas olika storlekar kanvaselement. Det här är främst att stoppa en mobil som handlar med fler pixlar än vad den måste.

 annat om (WindowWidth & GT; 900) {
  IMG = loadimage ("tillgångar / studio-tablett-wide.png");
  Var Canvas = Createcanvas (1200, 394);
  SCL = 60;
  maxspeed = 7;
  } annars {
  IMG = loadimage ("tillgångar / studio-tablett-tall.png");
  Var Canvas = Createcanvas (700, 230);
  SCL = 40;
  maxspeed = 5;
  } 

11. Gör ett rutnät

När skärmstorleken utarbetas placeras duken i header-div-taggen i sidan index.html. Ett antal kolumner och rader utarbetas baserat på bredden och höjden; Det är lite som ett osynligt rutnät. Slutligen är en array inställd för flödesfältet.

 Canvas.parent ("rubrik");
cols = golv (bredd / scl);
rader = golv (höjd / scl);
Flowfield = Ny matris (kols); 

12. Gör partiklar

Antalet partiklar är upprättat baserat på skärmens bredd - om skärmen är 1920 pixlar bred än 2500 partiklar kommer att skapas och det flyttas nedåt därifrån. A för slinga skapar de nya partiklarna. Bakgrundsfärgen på skärmen är inställd på nästan full vit.

 var numpartiklar = math.floor ((2500/1920) * Bredd);
  för (var i = 0; i & lt; numpartiklar; i ++) {
  partiklar [i] = ny partikel ();
  }
  Bakgrund (245);
} 

13. Rita skärmen

Resultaten av alla beräkningar dras på skärmen varje ram i dragfunktionen. För det första fyller en ljusgrå rektangel med en mycket låg opacitet skärmen för att blekna vad som tidigare har dragits. Efter detta är fyllningen avstängt när partiklarna kommer att bestå av slag som inte fylls.

 Funktionsdrag () {
  nostroke ();
  fyll (245, 10);
  rekt (0, 0, bredd, höjd);
  nofill ();
  Var yoff = 0; 

14. Skapa en flödeseffekt

För att få flödeseffekten finns det två "för" loopar som rör sig genom raderna och kolumnerna för att uppdatera ljudvärdena. Dessa ändras sedan i vinklar från brusvärdet redo för att uppdatera partiklarna för var och en av positionerna på skärmen.

 för (var y = 0; y & lt; rader; y ++) {
  Var xoff = 0;
  för (var x = 0; x & lt; cols; x ++) {
  varindex = (x + y * cols);
  Varvinkel = Buller (Xoff, Yoff, Zoff) * two_pi * 4;
  var v = p5.vector.fromangle (vinkel); 

15. Uppdatera arrayen

Array av flöde uppdateras med vinkeln och värdena ökas så att förskjutningen av varje position ökas varje gång den går upp. Det kan tyckas komplicerat men det skapar bara slumpmässig flytande rörelse för att partiklarna följer på skärmen.

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

16. Uppdatera partiklarna

Nu är partiklarna alla looped genom i sin matris. Varje enskild partikel berättas att följa flödesfältet, uppdatera, kontrollera skärmens kanter, sprida något och slutligen dras på skärmen med hjälp av visningsfunktionen. Spara filen och testa "index.html" för att se partiklarna som rör sig om.

 för (var i = 0; i & lt; partiklar.length; i ++) {
  partiklar [I]. Följ (flowfield);
  partiklar [i] .Update ();
  partiklar [i] .edes ();
  partiklar [I] .scatter ();
  partiklar [i] .show ();
  }
} 

17. Lägg till texten

Texten är en mask som placeras över toppen. För att göra detta placeras den korrekta bilden över toppen av partiklarna. Lägg till den här koden före stängningsfunktionen. Spara och kolla webbläsaren för att se effekten som fungerar med texten nu.

 Bild (IMG, 0, 0); 

18. Upptäck muspositionen

Muspositionen är refererad och X- och Y-värdena är mappade på graden av vinklar som kan flyttas. På Y-axeln kommer detta att vara -25 till 25 och vice versa för X-axeln. Den återstående koden ska placeras efter den sista koden tillsattes före änden av dragfunktionen.

 Targety = Math.Round (karta (Musex, 0, Bredd, -25, 25));
targetx = math.round (karta (mousey, 0, höjd, 25, -25)); 

19. Lätt på plats

Målpositionen ges nu en liten lättnad så att graderna långsamt når sitt mål. Detta skapas med hjälp av en klassisk lättnadsalgoritm för att ta bort den aktuella positionen från destinationen och multiplicera med ett lågt antal.

 var vx = (Targetx - currx) * 0,05;
Var vy = (Targety - Curry) * 0,05;
Calcx + = VX;
Calcy + = VY; 

20. Skriv CSS

Den "T" -variabeln här tar de beräknade värdena och placerar dem i en CSS-sträng med hjälp av transformationsvärdena för Rotatex och Rotatey. Den aktuella positionen beräknas från det läge duken för närvarande roteras till.

 t = 'ROTATEX (' + CalcX + 'DEG) ROTATEY (' + Calcy + 'DEG)';
currx = calcx;
Curry = Calcy; 

21. Avsluta

Nu appliceras CSS på Canvas-elementet i den här koden. Spara sidan och förhandsgranska detta i webbläsaren. Nu uppdaterar musen helt rotationen av duken så att den blir när musen rör sig. Naturligtvis flyttar alla partiklarna i det utrymme med det på skärmen.

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

Denna artikel publicerades ursprungligen i Creative Web Design Magazine Web Designer. köpa Utgåva 271 eller prenumerera .

Relaterade artiklar:

• 70 bästa gratis teckensnitt för designers
• 6 steg till den perfekta online-läsupplevelsen
• Gratis Online Tool visar vad dina teckensnitt kan göra