Interaktív 3D-s tipográfia hatásai

A tipográfia mindig nagy szerepet játszott a tervezői szerszámok arzenáljában, mivel kiválasztják a megfelelő betűtípust, amely növeli az üzenetet, és bemutatja a megfelelő kontextust az általa közölt. Az elmúlt nyolc évben a webes tervezők képesek voltak behozni Egyéni betűtípusok mint például kinetikus tipográfia a tervezésükre, és hasonló tipográfiai ellenőrzéssel rendelkeznek a nyomtatott tervezők által élvezték.

Vessen egy olyan webhelyet, amelyek a napi címek díjnyerteseként vagy fogadó oldalán szerepelnek, és hamarosan észre fogják venni, hogy a tipográfia használatuk központi szerepet játszik a tervezéshez, így a versenyük fölé emelkedik. Ez az animált betűformáktól, a reaktív mozgástól a felhasználói kölcsönhatásokig terjedhet, a formák kialakításának merész használatához (tartsa biztonságban a tipográfiai fájlokat felhő tároló ).

Ha figyelmét megragadja, megragadja a megragadó webhelyet nulla fuss, próbálja meg a weboldal építője is. És győződjön meg róla, hogy a webhely teljesítménye a tetején van web hosting .

• 3D Fonts: 9 Legjobb típusa tippek

Ebben a bemutatóban a típushatás a betűk alakzatát maszkként fogja használni néhány gyors, szabadon folyó részecskék nyomvonalakhoz, amelyek dinamikusan örvénynek és átmegyek a betűkkel. Nem csak lesz ez a gyönyörű animáció, hanem mivel ez lesz a Html5 vászon Elem, ez 3D-ben átalakul, hogy az egér felé forogjon, ahogy a képernyő körül mozog. Ez tökéletes a helyszíni fejlécekhez, vagy csak akkor, ha meg kell ragadnia a felhasználó figyelmét a cselekvésre.

Töltse le a bemutató fájlokat itt

01. Indítsa el a folyamatot

Nyissa meg a "Start" mappát a Code IDE projektfájljairól. A projekt elkezdi a részecske objektumosztály létrehozásával. Ez arra szolgál, hogy létrehozza a folyamatos képeket a projekt szövegében. Nyissa meg a "Sketch.js" fájlt, és adja hozzá a következő változót az alaprészecske létrehozásához.

 Funkció részecske () {
  this.Pos = Crealkector (véletlen (szélesség), véletlen ((magasság - 100)));
  this.vel = Crealkector (0, 0);
  this.acc = Crealkector (0, 0);
  ez.maxspeed = maxspeed;
  ez.Prevpos = this.pos.copy (); 

02. Frissítse a részecske

A részecske mozgatásához frissítési funkció lesz futtat minden keretben, ez kidolgozza a részecske sebességét és a sebességet a sebességhez. A sebességet végül egy globális változó korlátozza, amelyet később hozzáadnak. A sebesség az egyes részecske helyzetéhez adódik. Egy részecske létrehozásával több ezer kerül létrehozásra a képernyőn egyszerre.

 ez.Update = funkció () {
  this.vel.add (this.acc);
  this.vel.limit (ez.maxspeed);
  this.pos.add (this.vel);
  this.acc.cult (0);
  } 

03. Menj az áramlással

Annak érdekében, hogy a részecskéket folyó mozgásukat, a zaj által generált áramlási mezőt követték. Az itt létrehozott funkció lehetővé teszi az áramlás vektorát, amelyet be kell adni, és ezután követni fogja, ezért a funkció neve. A vektor irányának erejét a részecskere kell alkalmazni.

 ez.follow = funkció (vektorok) {
  var x = padló (this.pos.x / scl);
  var y = padló (ez.Pos.y / scl);
  var index = x + y * cols;
  var Force = Vektorok [index];
  ez.Applyforce (erő);
  } 

04. Kövesse, de nem túl szorosan

Annak érdekében, hogy megállítsuk az összes résztvevő részecskéket, amely könnyen megtörténhet ezzel a mozgással, a részecskék nagyon kis mennyiségű véletlenszerűséggel rendelkeznek pozíciójukhoz. Ez kis mennyiségű szórást okozhat.

 ez.Catter = funkció (vektorok) {
  this.pos.x + = véletlen (-0,9, 0,9);
  this.pos.y + = véletlen (-0,9, 0,9);
  }
  ez.ApplyForce = funkció (erő) {
  this.Acc.Add (erő);
  } 

05. A részecske megjelenítése

A Show funkció itt megjeleníti a részecskét. Az első dolog, amit csinál, hozzáad egy pixelütemű, világosszürke színű, hogy létrehozza a vonalat. A vonal az aktuális pozíciójától az előző keret utolsó helyzetéig húzódik. Az előző pozíciót legközelebb a hurokon keresztül tárolják.

 ez.Show = funkció () {
  stroke (180);
  strokeweight (1);
  vonal (this.pos.x, this.pos.y, this.prevpos.x, this.prevpos.y);
  ez.UpdatePrev ();
  }
  ez.UpdatePrev = funkció () {
  this.prevpos.x = this.pos.x;
  this.prevpos.y = this.pos.y;
  } 

06. Körülvágja

Az élek függvénye akkor működik, ha a részecske eléri a képernyő szélét, és ha igen, akkor az ellenkező oldalon van. Ez a rész az X pozícióval foglalkozik, így észleli, ha nagyobb, mint a képernyő szélessége, majd elküldi a bal szélen és fordítva.

 ez.edges = funkció () {
  ha (ez.pos.x & gt; szélesség) {
  this.pos.x = 0;
  ez.UpdatePrev ();
  }
  ha (ez.pos.x & lt; 0) {
  this.pos.x = Szélesség;
  ez.UpdatePrev ();
  } 

07. Wrapper öröme

Ez a kód az élmegjelenítés fennmaradó része, és észleli az Y tengely részecskét a képernyő tetejére és aljára. A zárójelek itt csomagolják az egész részecskeosztályt. Ez azt jelenti, hogy ezt az osztályt sok részecskék lehet létrehozni.

 ha (ez.pos.y & gt; magasság) {
  this.pos.y = 0;
  ez.UpdatePrev ();
  }
  ha (ez.pos.y & lt; 0) {
  this.pos.y = magasság;
  ez.UpdatePrev ();
  }
  }
} 

08. Készítsen sok részecskéket

Most, ahogy a részecske létrejön, itt az ideje, hogy sok részecske legyen. Ehhez az összes kódunk a részecske funkcióosztály felett haladhat. Itt számos globális változót jelent meg, hogy lehetővé tegye a rendszer futtatását. A kód alatt különböző időkben fognak hívni, így meg lehet vizsgálni.

 VAR INC = 0,1;
var scl = 100, zoff = 0;
var cols, sorok, mozgás = 0;
var részecskék = [];
var Flowfield;
var img;
var maxspeed;
var t, calcx = 0, calcy = 0, currx = 0, curry = 0, targetx = 0, célpont = 0; 

09. Állítsa be mindent

A beállított funkció, amelyet itt bejelentettek, beállítja, hogy a képernyő hogyan fog megjelenni a kezdetre. Az első kimutatás az, hogy megnézze, mi a képernyő szélessége. Ha viszonylag nagy, nagy kép van betöltve, a vászon jön létre, és ezt a CSS-en keresztül méretezik, hogy illeszkedjenek a kijelzőn.

 Funkcióbeállítás () {
  ha (Windowwidth & Gt; 1200) {
  img = terhelés ("Eszközök / stúdió.png");
  var coras = createcanvas (1920, 630);
  maxspeed = 10.5;
  } 

10. Más képernyők

Az IF utasítás többi része ellenőrzi a különböző képernyőfelbontásokat, és betölti a legmegfelelőbb képet, amely a képernyő méretének legmegfelelőbb. Hasonlóképpen különböző méretű vászonelemeket hoznak létre. Ez főként abbahagyja a mobil, amely több képponttal foglalkozik, mint amilyennek kell lennie.

 más, ha (Windowwidth & Gt; 900) {
  img = terhelés ("Eszközök / stúdió-tabletta széles.png);
  var coras = createcanvas (1200, 394);
  scl = 60;
  maxspeed = 7;
  } más {
  img = terhelés ("Eszközök / stúdió-tabletta-tall.png");
  var coras = createcanvas (700, 230);
  scl = 40;
  maxspeed = 5;
  } 

11. Készíts egy rácsot

Miután a képernyő mérete kidolgozott, a vászon az index.html oldalon található fejléccímke belsejébe kerül. Számos oszlop és sor a szélesség és magasság alapján dolgozik; Ez egy kicsit, mint egy láthatatlan rács. Végül egy tömb áll rendelkezésre az áramlási mezőre.

 vászon.parent ('fejléc);
cols = padló (szélesség / scl);
sorok = padló (magasság / scl);
flowfield = új tömb (cols); 

12. Készítsen részecskéket

A részecskék számát a képernyő szélessége alapján állítják be - ha a képernyő 1920 pixel széles, akkor 2500 részecskék jönnek létre, és onnan lefelé mozog. Az A hurok létrehozza az új részecskéket. A képernyő háttérszíne szinte teljes fehérre van állítva.

 VAR NumParticles = Math.Floor ((2500/1920) * szélesség);
  mert (var i = 0; i & lt; numuncles; i ++) {
  részecskék [i] = új részecske ();
  }
  háttér (245);
} 

13. Rajzolja le a képernyőt

Az összes számítás eredményeit a képernyő minden keretén lévő képernyőn rajzolják. Először is, egy könnyű szürke téglalap, amelynek nagyon alacsony opacitása van, kitölti a képernyőt, hogy elhalványuljon, amit korábban rajzoltak. Ezután húzódik, a kitöltés ki van kapcsolva, mivel a részecskék olyan stroke-ekből állnak, amelyek nem töltődnek.

 Funkció rajz () {
  nostroke ();
  Töltse ki (245, 10);
  rect (0, 0, szélesség, magasság);
  NoFill ();
  var Yoff = 0; 

14. Hozzon létre áramlási hatást

Az áramlási hatás eléréséhez két "for" hurok van a sorok és oszlopok áthelyezése a zajértékek frissítéséhez. Ezeket a zajértéketől készenléti szögekké változtatják, hogy frissítse a részecskéket a képernyőn lévő pozíciókhoz.

 az (var y = 0, y & lt; swors, y ++) {
  var xoff = 0;
  (var x = 0; x 

15. Frissítse a tömböt

Az áramlás tömbje frissül a szöggel, és az értékek megnövekedtek, hogy az egyes pozíciók eltolását minden alkalommal növeljék. Ez bonyolultnak tűnhet, de valójában csak véletlenszerű áramlási mozgást hoz létre a képernyőn követendő részecskék számára.

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

16. Frissítse a részecskéket

Most a részecskék mindegyike a tömbjében hurok. Minden egyes részecske mondta, hogy kövesse az áramlási mező, a frissítés, ellenőrizze a képernyő szélein, scatter enyhén, és végül levonni a képernyőn a show funkciót. Mentse el a fájlt, és tesztelje az "index.html" -t, hogy megnézze a részecskéket.

 a (var i = 0; i & lt; részecskék.hossz, i ++) {
  részecskék [i] .follow (flowfield);
  részecskék [i] .Update ();
  részecskék [i] .edges ();
  részecskék [i] .catter ();
  részecskék [i] .show ();
  }
} 

17. Adja hozzá a szöveget

A szöveg egy maszk, amely a tetején helyezkedik el. Ehhez a megfelelő kép a részecskék tetejére kerül. Adja hozzá ezt a kódot a rajzfüggvény záróblokkja előtt. Mentse és ellenőrizze a böngészőt, hogy lássa a szöveggel dolgozó hatásot.

 kép (img, 0, 0); 

18. Értesítse az egér pozícióját

Az egér pozíciója hivatkozik, és az X és Y értékek leképezhetők a mozgatható fokú szögekre. Az Y tengelyen ez -25 és 25 között lesz, és fordítva az X tengelyre. A fennmaradó kódot az utolsó kód hozzáadása után kell elhelyezni, a rajzfüggvény vége előtt.

 Targety = Math.Round (térkép (mousex, 0, szélesség, -25, 25));
targetx = math.round (térkép (egér, 0, magasság, 25, -25)); 

19. Könnyű a helyére

A célhelyzet most egy kicsit enyhül, hogy a fokozatok lassan elérjék a céljukat. Ezt hozza létre egy klasszikus lazító algoritmus segítségével, hogy levegye az aktuális pozíciót a célállomásról, és alacsony számmal szorozza.

 var vx = (Targetx - currx) * 0,05;
var vy = (célsebesség - curry) * 0,05;
calcx + = vx;
Calcy + = vy; 

20. Írja be a CSS-t

A „t” változó veszi itt a számított értékeket és helyeket őket egy CSS húr a transzformáció értékei rotateX és rotateY. Az aktuális pozíció a vászon pozíciójából kerül kiszámításra.

 t = 'rotatex (' + calcx + 'deg) rotatey (' + calcy + 'deg)';
CURX = CALMX;
Curry = Calcy; 

21. befejezze

Most a CSS-t a Canvas elemre alkalmazzák ebben a kódban. Mentse el az oldalt, és nézze meg ezt a böngészőben. Most az egér teljesen frissíti a vászon forgását úgy, hogy az egér mozog. Természetesen az összes részecske ezen a téren mozog a képernyőn.

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

Ezt a cikket eredetileg a Creative Web Design Magazine Web Designer-ben tették közzé. megvesz Kiadás 271 vagy Iratkozz fel .

Kapcsolódó cikkek:

• 70 A legjobb ingyenes betűtípusok a tervezők számára
• 6 lépés a tökéletes online olvasási élményhez
• Az ingyenes online eszköz megmutatja, hogy mit tehet a betűtípusok