Maak interactieve 3D-typografie-effecten

Typografie heeft altijd een belangrijke rol gespeeld in het arsenaal van tools van een ontwerper, omdat ze het juiste lettertype selecteren dat het bericht zal verbeteren en de juiste context presenteert voor wat wordt gecommuniceerd. In de afgelopen acht jaar hebben webontwerpers het vermogen gehad om binnen te brengen aangepaste lettertypen zoals kinetische typografie naar hun ontwerp en hebben vergelijkbare typografische controle voor degenen die genieten van printontwerpers.

Bekijk veel van de sites die worden vermeld als bekroonde of ontvangende 'site van de dag' titels en je zult binnenkort merken dat hun gebruik van typografie centraal staat in het ontwerp, waardoor ze boven hun concurrentie kunnen stijgen. Dit kan variëren van geanimeerde lettervormen, reactieve beweging naar de gebruikersinteracties, om te vetgedrukt gebruik van type formulieren in het middenpodium (houd uw typografiebestanden veilig in cloud opslag ​

Als u een attend grabbing-site met nul gedoe wilt maken, probeer dan een website bouwer te. En zorg ervoor dat de prestaties van uw site is geoptimaliseerd met de bovenkant web hosting ​

• 3D-lettertypen: 9 TOP TYPE TIPS

In deze tutorial zal het typeeffect de vormen van de letters gebruiken als een masker op een aantal snelle, vrijstromende deeltjespaden die dynamisch zullen wervelen en door de letters gaan. Niet alleen zal er deze mooie animatie zijn, maar omdat dit op de Html5 canvas Element, dit zal in 3D worden getransformeerd om naar de muis te draaien terwijl het rond het scherm beweegt. Dit is perfect voor sitekoppen of alleen wanneer u de aandacht van de gebruiker op een oproep tot actie moet pakken.

Download de tutorial-bestanden hier

01. Start het proces

Open de map 'Start' uit de projectbestanden in uw code IDE. Het project gaat beginnen met het maken van de deeltjesobjectklasse. Dit zal worden gebruikt om de vloeiende beelden in de tekst in het project te creëren. Open het bestand 'Sketch.js' en voeg de volgende variabele toe om het basisdeeltje te maken.

 Functie-deeltje () {
  this.POS = createvector (willekeurig (breedte), willekeurig ((hoogte - 100)));
  this.vel = createvector (0, 0);
  this.acc = createvector (0, 0);
  this.maxSpeed ​​= maxspeed;
  this.Prevpos = this.pos.copy (); 

02. Werk het deeltje bij

Om het deeltje te verplaatsen, wordt een updatefunctie uitgevoerd elk frame, dit zal de snelheid van het deeltje en de versnelling op de snelheid uitwerken. De snelheid zal uiteindelijk worden beperkt door een globale variabele die later wordt toegevoegd. De snelheid wordt toegevoegd aan de positie van het individuele deeltje. Door één deeltje te creëren, worden enkele duizenden op elk moment op het scherm gemaakt.

 this.update = functie () {
  this.vel.add (this.acc);
  this.vel.limit (thismaxSpeed);
  this.pos.add (this.vel);
  this.acc.mult (0);
  } 

03. Ga met de stroom

Om de deeltjes hun vloeiende beweging te geven, wordt een stroomgebied gegenereerd door ruis gevolgd. De functie die hier is gemaakt, stelt de stroomstroom in die moet worden ingevoerd en wordt dan gevolgd, vandaar de naam van deze functie. De kracht van de vectorrichting zal op het deeltje worden aangebracht.

 This.Follow = Functie (Vectoren) {
  var x = vloer (this.pos.x / SCL);
  var y = vloer (this.pos.y / SCL);
  var-index = x + y * cols;
  Var Force = Vectoren [Index];
  dit.Applyforce (kracht);
  } 

04. Volg maar niet te nauw

Om te voorkomen dat alle deeltjes elkaar samenkomen, die gemakkelijk met dit soort bewegingen kan gebeuren, zullen de deeltjes een zeer kleine hoeveelheid willekeur hebben toegevoegd aan hun positie. Dit veroorzaakt een lichte hoeveelheid verstrooiing.

 This.Scatter = -functie (vectoren) {
  this.pos.x + = willekeurig (-0.9, 0.9);
  this.pos.y + = willekeurig (-0.9, 0.9);
  ​
  this.Aplyforce = functie (kracht) {
  this.acc.add (force);
  } 

05. Toon het deeltje

De functie SHOW-functie toont het deeltje. Het eerste wat het doet, is een pixelslag van een lichtgrijze kleur toevoegen om de lijn te maken. De lijn wordt uit zijn huidige positie getrokken naar de laatste positie op het vorige frame. De vorige positie wordt opgeslagen voor de volgende keer via de lus.

 This.Show = functie () {
  beroerte (180);
  beslag (1);
  regel (this.pos.x, this.pos.y, this.prevpos.x, this.prevpos.y);
  this.updateprev ();
  ​
  this.updateprev = functie () {
  this.Prevpos.x = this.pos.x;
  this.Prevpos.y = this.pos.y;
  } 

06. Wikkel rond

De randenfunctie werkt uit als het deeltje de rand van het scherm bereikt en, zo ja, wikkelt het rond om aan de andere kant te komen. Dit gedeelte behandelt de X-positie, zodat het detecteert of het groter is dan de breedte van het scherm en vervolgens naar de linkerrand stuurt en omgekeerd.

 This.edges = functie () {
  if (this.pos.x & gt; breedte) {
  this.pos.x = 0;
  this.updateprev ();
  ​
  if (this.pos.x & lt; 0) {
  this.pos.x = breedte;
  this.updateprev ();
  } 

07. Vermindering van Wrapper

Deze code is de rest van de randdetectie en het detecteert het deeltje op de y-as voor de boven- en onderkant van het scherm. De haakjes sluiten hier de hele deeltjesklasse af. Dit betekent door deze klasse te gebruiken, kunnen veel deeltjes worden gemaakt.

 if (this.pos.y & gt; hoogte) {
  this.pos.y = 0;
  this.updateprev ();
  ​
  if (this.pos.y & lt; 0) {
  this.pos.y = hoogte;
  this.updateprev ();
  ​
  ​
} 

08. Maak veel deeltjes

Nu het deeltje is gecreëerd, is het tijd om na te denken over het maken van veel deeltjes. Om dit te doen, kunnen al onze code boven de klasse deeltjesfunctie gaan. Hier worden een aantal globale variabelen verklaard dat het systeem kan worden uitgevoerd. Ze worden tijdens de code op verschillende tijden gebeld, zodat ze dan kunnen worden onderzocht.

 Var inc = 0,1;
var SCL = 100, ZOFF = 0;
var cols, rijen, beweging = 0;
vardeelt deeltjes = [];
Var Flowfield;
var img;
var maxSpeed;
Var T, Calcx = 0, Calcy = 0, CURRX = 0, Curry = 0, Targetx = 0, Targety = 0; 

09. Zet het allemaal op

De Setup-functie, hier gedeclareerd, bepaalt hoe het scherm naar het begin zal kijken. De eerste detectie die wordt gedaan is om te zien wat de breedte van het scherm is. Als het relatief groot is, wordt een groot beeld geladen, het canvas wordt gemaakt en dit wordt geschaald via CSS om binnen het display te passen.

 Functie-instelling () {
  if (windowbiddh & gt; 1200) {
  IMG = LODIMAGE ("Activa / studio.png");
  Var Canvas = CreateEcanvas (1920, 630);
  maxspeed = 10.5;
  } 

10. Andere schermen

De rest van de IF-instructie controleert verschillende schermresoluties en laadt een afbeelding die het meest geschikt is voor die schermgrootte. Op dezelfde manier worden verschillende canvaselementen gecreëerd. Dit is vooral om een ​​mobiel te stoppen met meer pixels dan het moet.

 anders if (windowbiddh & gt; 900) {
  IMG = LODIMAGE ("Activa / studio-tablet-wide.png");
  Var Canvas = CreateEcanvas (1200, 394);
  SCL = 60;
  maxspeed = 7;
  } anders {
  IMG = LODIMAGE ("Activa / studio-tablet-tall.png");
  Var Canvas = CreateEcanvas (700, 230);
  SCL = 40;
  maxspeed = 5;
  } 

11. Maak een raster

Nadat de schermgrootte is uitgewerkt, wordt het canvas in de koptekst in de pagina van de index.html geplaatst. Een aantal kolommen en rijen wordt uitgewerkt op basis van de breedte en hoogte; Het is een beetje als een onzichtbaar raster. Ten slotte wordt een array ingesteld voor het stroomveld.

 canvas.parent ('header');
COLS = vloer (breedte / SCL);
rijen = vloer (hoogte / SCL);
Flowfield = Nieuwe array (COLS); 

12. Maak deeltjes

Het aantal deeltjes is opgezet op basis van de breedte van het scherm - als het scherm 1920 pixels breed is, worden er 2500 deeltjes gemaakt en beweegt het naar beneden vanaf daar. A voor lus creëert de nieuwe deeltjes. De achtergrondkleur van het scherm is ingesteld op bijna volledig wit.

 Var Numparticles = MATH.VLOOR ((2500/1920) * Breedte);
  voor (var i = 0; i & lt; numparticles; i ++) {
  deeltjes [I] = nieuw deeltje ();
  ​
  achtergrond (245);
} 

13. Teken het scherm

De resultaten van alle berekeningen worden op elk frame op het scherm in de trekfunctie getekend. Ten eerste vult een lichtgrijze rechthoek met een zeer lage opaciteit het scherm om te vervagen wat eerder is getekend. Nadat dit wordt getekend, wordt de vulling uitgeschakeld terwijl de deeltjes bestaan ​​uit slagen die niet vullen.

 Functie Draw () {
  nostroke ();
  vul (245, 10);
  rect (0, 0, breedte, hoogte);
  geen vulling();
  var yoff = 0; 

14. Maak een stroomeffect

Om het stroomeffect te krijgen, zijn er twee 'voor' lussen die door de rijen en kolommen gaan om de geluidswaarden bij te werken. Deze worden vervolgens veranderd in hoeken van de ruiswaarde klaar om de deeltjes bij te werken voor elk van de posities op het scherm.

 voor (var y = 0; y & lt; rijen; y ++) {
  Var XOFF = 0;
  voor (var x = 0; x & lt; cols; x ++) {
  Var Index = (x + y * cols);
  Var hoek = ruis (xoff, yoff, zoff) * two_pi * 4;
  var v = p5.vector.fromangle (hoek); 

15. Werk de array bij

De reeks van de stroming wordt bijgewerkt met de hoek en de waarden worden verhoogd, zodat de offset van elke positie wordt verhoogd telkens wanneer het omhoog gaat. Dit lijkt misschien gecompliceerd, maar het creëert echt gewoon willekeurige stromende beweging om de deeltjes op het scherm te volgen.

 v.Setmag (1);
  Flowfield [index] = v;
  xoff + = inc;
  ​
  yoff + = inc;
  ZOFF + = 0,001;
  } 

16. Werk de deeltjes bij

Nu zijn de deeltjes allemaal doorlopen in hun array. Elk individueel deeltje wordt verteld om het stroomveld te volgen, om bij te werken, de randen van het scherm te controleren, licht te scatteren en uiteindelijk op het scherm te worden getekend met behulp van de functie-functie. Sla het bestand op en test de 'index.html' om de deeltjes over te zien.

 voor (var i = 0; i & lt; deeltjes.lengte; i ++) {
  deeltjes [I]. Volg (Flowfield);
  deeltjes [i] .Update ();
  deeltjes [I] .edges ();
  deeltjes [i] .scontitie ();
  deeltjes [i] .show ();
  ​
} 

17. Voeg de tekst toe

De tekst is een masker dat boven de bovenkant is geplaatst. Om dit te doen, wordt het juiste beeld boven de bovenkant van de deeltjes geplaatst. Voeg deze code toe vóór de sluitingsbeugel van de trekfunctie. Sla de browser op en controleer of het effect nu met de tekst werkt.

 Afbeelding (IMG, 0, 0); 

18. Detecteer de positie van de muis

De muispositie wordt verwezen en worden de X- en Y-waarden in kaart gebracht op graadhoeken die kunnen worden verplaatst. Op de Y-as zal dit -25 tot 25 zijn en vice versa voor de x-as. De resterende code moet worden geplaatst nadat de laatste code is toegevoegd, vóór het einde van de trekfunctie.

 Targety = Math.Round (kaart (Mousex, 0, breedte, -25, 25));
TargetX = Math.Round (MAP (muisachtig, 0, hoogte, 25, -25)); 

19. gemak op zijn plaats

De doelpositie krijgt nu een beetje versoepeling, zodat de graden langzaam hun doelwit bereiken. Dit wordt gemaakt met behulp van een klassiek versoepeling algoritme van het uitschakelen van de huidige positie van de bestemming en vermenigvuldigt met een laag aantal.

 VVE VX = (TARGETX - CALRX) * 0,05;
Var VY = (Targety - Curry) * 0,05;
calcx + = vx;
Calcy + = VY; 

20. Schrijf de CSS

De 't' variabele hierneemt hier de berekende waarden en plaatst ze in een CSS-string met behulp van de transformatiewaarden van rotatex en rotatie. De huidige positie wordt berekend op basis van de positie waar het canvas momenteel is gedraaid.

 T = 'rotatex (' + calcx + 'deg) rotatie (' + calcy + 'deg)';
currx = calcx;
Curry = Calcy; 

21. Voltooien

Nu wordt de CSS toegepast op het canvaselement in deze code. Sla de pagina op en bekijk dit in de browser. Nu werkt de muis de rotatie van het canvas volledig bij, zodat deze wordt als de muisbeweging beweegt. Natuurlijk bewegen alle deeltjes in die ruimte ermee op het scherm.

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

Dit artikel is oorspronkelijk gepubliceerd in Creative Web Design Magazine Web Designer. Kopen uitgave 271 of inschrijven ​

Gerelateerde artikelen:

• 70 beste gratis lettertypen voor ontwerpers
• 6 stappen naar de perfecte online leeservaring
• Gratis online tool laat u zien wat uw lettertypen kunnen doen