Përmbajtje
- 01. Filloni procesin
- 02. Azhurnoni grimcën
- 03. Shkoni me rrjedhën
- 04. Ndiqni por jo shumë nga afër
- 05. Shfaq grimcën
- 06. Mbështilleni përreth
- 07. Kënaqësia e mbështjellësit
- 08. Bëni shumë grimca
- 09. Vendosni të gjitha
- 10. Ekranet e tjera
- 11. Bëni një rrjet
- 12. Bëni grimca
- 13. Vizato ekranin
- 14. Krijoni një efekt fluksi
- 15. Azhurnoni grupin
- 16. Azhurnoni grimcat
- 17. Shtoni tekstin
- 18. Zbuloni pozicionin e miut
- 19. Lehtësimi në vend
- 20. Shkruani CSS
- 21. Mbaro
Tipografia gjithmonë ka luajtur një pjesë të madhe në arsenalin e mjeteve të çdo projektuesi pasi ata zgjedhin llojin e duhur që do të përmirësojë mesazhin dhe do të paraqesë kontekstin e duhur për atë që komunikohet. Gjatë tetë viteve të fundit, dizenjuesit e uebit kanë pasur aftësinë të sjellin lloje të personalizuara të tipit tipografi kinetike në modelin e tyre dhe të kenë kontroll të ngjashëm tipografik me ato që gëzojnë dizajnerët e shtypjes.
Shikoni shumë nga faqet që paraqiten si tituj fitues të çmimeve ose marrës të ‘sitit të ditës’ dhe së shpejti do të vini re se përdorimi i tyre i tipografisë bëhet thelbësor për modelin, duke i lejuar ata të ngrihen mbi konkurrencën e tyre. Kjo mund të variojë nga format e letrave të animuara, lëvizja reaktive te ndërveprimet e përdoruesve, deri te përdorimi i guximshëm i formave të tipit që zënë vendin në qendër (mbajini skedarët tuaj të tipografisë të sigurt në ruajtjen e reve).
Nëse doni të krijoni një sit tërheqës vëmendjeje me zhurmë zero, provoni edhe një ndërtues uebsajtesh. Dhe sigurohuni që performanca e faqes suaj është e optimizuar me një web hosting të lartë.
- Shkronjat 3D: 9 këshilla të tipit më të lartë
Në këtë manual, efekti i tipit do të përdorë format e shkronjave si një maskë për disa shtigje të shpejta, me grimca të lira që do të rrotullohen dinamikisht dhe do të lëvizin nëpër shkronja. Jo vetëm që do të ketë këtë animacion të bukur, por pasi kjo do të jepet në elementin e kanavacës HTML5, kjo do të shndërrohet në 3D për t'u rrotulluar drejt miut ndërsa lëviz rreth ekranit. Kjo është perfekte për titrat e faqeve ose thjesht kur duhet të tërhiqni vëmendjen e përdoruesit për një thirrje për veprim.
Shkarkoni skedarët tutorial këtu
01. Filloni procesin
Hapni dosjen ‘start’ nga skedarët e projektit në kodin tuaj IDE. Projekti do të fillojë duke krijuar klasën e objektit të grimcave. Kjo do të përdoret për të krijuar imazhet rrjedhëse brenda tekstit në projekt. Hapni skedarin ‘sketch.js’ dhe shtoni ndryshoren e mëposhtme për të filluar krijimin e grimcës bazë.
funksioni Particle () {this.pos = createVector (random (width), random ((height - 100))]; this.vel = krijoniVektor (0, 0); this.acc = krijoniVektor (0, 0); kjo.maxspeed = maxSpeed; this.prevPos = this.pos.copy ();
02. Azhurnoni grimcën
Në mënyrë që të lëvizë grimca, do të ekzekutohet një funksion i azhurnimit çdo kornizë, kjo do të punojë shpejtësinë e grimcës dhe përshpejtimin në shpejtësi. Shpejtësia përfundimisht do të kufizohet nga një ndryshore globale e cila do të shtohet më vonë. Shpejtësia i shtohet pozicionit të grimcës individuale. Duke krijuar një grimcë, disa mijëra do të krijohen në ekran në çdo kohë.
this.update = funksioni () {this.vel.add (this.acc); this.vel.limit (this.maxspeed); this.pos.add (this.vel); this.acc.mult (0); }
03. Shkoni me rrjedhën
Për t'i dhënë grimcave lëvizjen e tyre rrjedhëse, do të ndiqet një fushë rrjedhje e krijuar nga zhurma. Funksioni i krijuar këtu mundëson që të kalohet vektori i rrjedhës dhe ai më pas do të ndiqet, pra emri i këtij funksioni. Forca e drejtimit të vektorit do të zbatohet në grimcë.
this.follow = funksioni (vektorët) {var x = kati (this.pos.x / scl); var y = dysheme (kjo.pos.y / scl); indeksi var = kolona x + y *; forca var = vektorët [indeksi]; kjo.apliko Forca (forca); }
04. Ndiqni por jo shumë nga afër
Në mënyrë që të ndalohen të gjitha grimcat të grumbullohen së bashku, gjë që mund të ndodhë lehtësisht me këtë lloj lëvizjeje, grimcat do të kenë një sasi shumë të vogël të rastësisë të shtuar në pozicionin e tyre. Kjo do të bëjë që të ndodhë një sasi e vogël shpërndarjeje.
this.scatter = funksioni (vektorët) {this.pos.x + = i rastësishëm (-0.9, 0.9); kjo.pos.y + = e rastësishme (-0.9, 0.9); } this.applyForce = funksioni (forca) {this.acc.add (forca); }
05. Shfaq grimcën
Funksioni show këtu tregon grimcën. Gjëja e parë që bën është të shtojë një goditje me një piksel të një ngjyre gri të hapur për të krijuar vijën. Vija është tërhequr nga pozicioni i saj aktual në pozicionin e saj të fundit në kornizën e mëparshme. Pozicioni i mëparshëm ruhet për herë tjetër përmes lakut.
kjo.show = funksioni () {goditje (180); pesha e goditjes (1); rresht (kjo.pos.x, kjo.pos.y, kjo.prevPos.x, kjo.prevPos.y); this.updatePrev (); } this.updatePrev = funksioni () {this.prevPos.x = kjo.pos.x; this.prevPos.y = this.pos.y; }
06. Mbështilleni përreth
Funksioni i skajeve funksionon nëse grimca arrin buzën e ekranit dhe, nëse po, e mbështjell atë për të ardhur në anën e kundërt. Kjo pjesë trajton pozicionin x, kështu që zbulon nëse është më e madhe se gjerësia e ekranit, duke e dërguar atë në skajin e majtë dhe anasjelltas.
this.edges = funksioni () {if (this.pos.x> gjerësia) {this.pos.x = 0; this.updatePrev (); } nëse (kjo.pos.x 0) {kjo.pos.x = gjerësia; this.updatePrev (); }
07. Kënaqësia e mbështjellësit
Ky kod është pjesa e mbetur e zbulimit të skajit dhe zbulon grimcën në boshtin y për pjesën e sipërme dhe të poshtme të ekranit. Kllapat këtu përmbyllin të gjithë klasën e grimcave. Kjo do të thotë që duke përdorur këtë klasë mund të krijohen shumë grimca.
nëse (kjo.pos.y> lartësia) {this.pos.y = 0; this.updatePrev (); } if (this.pos.y 0) {this.pos.y = lartësi; this.updatePrev (); }}}
08. Bëni shumë grimca
Tani ndërsa grimca është krijuar është koha të mendojmë për të bërë shumë grimca. Për ta bërë këtë, i gjithë kodi ynë mund të shkojë mbi klasën e funksionit të Grimcave. Këtu deklarohen një numër variablash globalë për të mundësuar funksionimin e sistemit. Ata do të thirren në kohë të ndryshme gjatë kodit, në mënyrë që të mund të hulumtohen.
var inc = 0,1; var scl = 100, zoff = 0; kolonat vargjet, lëvizja = 0; grimca var = =]; fushë rrjedhëse var; var img; var maxSpeed; var t, calcX = 0, calcY = 0, currX = 0, currY = 0, targetX = 0, targetY = 0;
09. Vendosni të gjitha
Funksioni i konfigurimit, i deklaruar këtu, përcakton se si do të duket ekrani në fillim. Zbulimi i parë që bëhet është të shohim se sa është gjerësia e ekranit. Nëse është relativisht i madh, ngarkohet një imazh i madh, krijohet kanavacë dhe kjo shkallëzohet përmes CSS për t'u përshtatur brenda ekranit.
konfigurimi i funksionit () {if (Gjerësia e dritares> 1200) {img = loadImage ("pasuritë / studio.png"); kanavacë var = krijoni Kanavacë (1920, 630); maxSpeed = 10,5; }
10. Ekranet e tjera
Pjesa tjetër e deklaratës if kontrollon rezolucione të ndryshme të ekranit dhe ngarkon një imazh që është më i përshtatshmi për atë madhësi të ekranit. Në mënyrë të ngjashme krijohen elementë kanavacë me madhësi të ndryshme. Kjo është kryesisht për të ndaluar që një celular të merret me më shumë piksela sesa duhet.
ndryshe nëse (Gjerësia e dritares> 900) {img = loadImage ("pasuritë / studio-tablet-gjerë.png"); kanavacë var = krijoni Kanavacë (1200, 394); scl = 60; maxSpeed = 7; } else {img = loadImage ("pasuritë / studio-tablet-i gjatë.png"); kanavacë var = krijoni Kanavacë (700, 230); scl = 40; maxSpeed = 5; }
11. Bëni një rrjet
Sapo të përpunohet madhësia e ekranit, kanavacë vendoset brenda etiketës div të kokës në faqen index.html. Një numër kolonash dhe rreshtash janë përpunuar bazuar në gjerësinë dhe lartësinë; është pak si një rrjet i padukshëm. Më në fund, një grup është vendosur për fushën e rrjedhës.
kanavacë.parent ('header'); kolonat = dyshemeja (gjerësia / scl); rreshtat = dysheme (lartësi / skl); fushë rrjedhëse = Varg i ri (kolonat);
12. Bëni grimca
Numri i grimcave është vendosur bazuar në gjerësinë e ekranit - nëse ekrani është 1920 pixel i gjerë, atëherë do të krijohen 2500 grimca dhe ajo lëviz poshtë nga atje. Një lak për krijon grimcat e reja. Ngjyra e sfondit të ekranit është vendosur në të bardhë pothuajse të plotë.
var numParticles = Matematikë. dysheme ((2500/1920) * gjerësi); për (var i = 0; i numParticles; i ++) {grimcat [i] = Grimca e re (); } sfond (245); }
13. Vizato ekranin
Rezultatet e të gjitha llogaritjeve janë tërhequr në ekran çdo kornizë në funksionin e vizatimit. Së pari, një drejtkëndësh gri i lehtë me një errësirë shumë të ulët mbush ekranin për të zbehur atë që është vizatuar më parë. Pasi të vizatohet kjo, mbushja është e fikur pasi grimcat do të përbëhen nga goditje që nuk mbushen.
vizatimi i funksionit () {noStroke (); mbush (245, 10); rect (0, 0, gjerësia, lartësia); noFill (); var yoff = 0;
14. Krijoni një efekt fluksi
Për të marrë efektin e rrjedhës ekzistojnë dy sythe ‘for’ që lëvizin nëpër rreshta dhe kolona për të azhurnuar vlerat e zhurmës. Këto më pas ndryshohen në kënde nga vlera e zhurmës e gatshme për të azhurnuar grimcat për secilën nga pozicionet në ekran.
për (var y = 0; rreshta y; y ++) {var xoff = 0; për (var x = 0; x kolona; x ++) {var indeks = (x + y * kolona); këndi var = zhurma (xoff, yoff, zoff) * TWO_PI * 4; var v = p5.Vektor.nga këndi (këndi);
15. Azhurnoni grupin
Vargu i rrjedhës azhurnohet me këndin dhe vlerat rriten në mënyrë që kompensimi i secilës pozitë të rritet sa herë që rritet. Kjo mund të duket e komplikuar, por në të vërtetë thjesht krijon lëvizje të rastit që rrjedhin për grimcat që të ndiqen në ekran.
v.setMag (1); fusha e rrjedhës [indeksi] = v; xoff + = inc; } yoff + = inc; zoff + = 0.001; }
16. Azhurnoni grimcat
Tani grimcat janë rrethuar në të gjithë grupin e tyre. Secilës grimcë individuale i thuhet të ndjekë fushën e rrjedhës, të azhurnojë, të kontrollojë skajet e ekranit, të shpërndahet pak dhe më në fund të vizatohet në ekran duke përdorur funksionin e shfaqjes. Ruani skedarin dhe provoni ‘index.html’ për të parë lëvizjen e grimcave.
për (var i = 0; grimcat i. gjatësia; i ++) {grimcat [i]. ndiqni (fusha e rrjedhës); grimcat [i]. azhurnojnë (); grimcat [i] .gëzat (); grimcat [i] .përhapje (); grimcat [i] .shfaq (); }}
17. Shtoni tekstin
Teksti është një maskë që vendoset sipër. Për ta bërë këtë, imazhi i saktë vendoset mbi pjesën e sipërme të grimcave. Shtoni këtë kod përpara mbajtësit të mbylljes të funksionit të vizatimit. Ruani dhe kontrolloni shfletuesin për të parë efektin duke punuar me tekstin tani.
imazhi (img, 0, 0);
18. Zbuloni pozicionin e miut
Pozicioni i miut referohet dhe vlerat x dhe y hartohen në këndet e shkallës që mund të lëvizen. Në boshtin y kjo do të jetë -25 deri 25 dhe anasjelltas për boshtin x. Kodi i mbetur duhet të vendoset pasi të jetë shtuar kodi i fundit, para përfundimit të funksionit të tërheqjes.
targetY = Math.round (harta (miu X, 0, gjerësia, -25, 25)); targetX = Math.round (harta (miu Y, 0, lartësia, 25, -25));
19. Lehtësimi në vend
Pozicionit të synuar tani i jepet një lehtësim i vogël në mënyrë që gradat të arrijnë ngadalë synimin e tyre. Kjo është krijuar duke përdorur një algoritëm klasik lehtësues të heqjes së pozicionit aktual nga destinacioni dhe shumëzimit me një numër të ulët.
var vx = (targetX - currX) * 0,05; var vy = (targetY - curry) * 0,05; calcX + = vx; calcY + = vy;
20. Shkruani CSS
Ndryshorja ‘t’ këtu merr vlerat e llogaritura dhe i vendos ato në një varg CSS duke përdorur vlerat e transformimit të rotateX dhe rotateY. Pozicioni aktual llogaritet nga pozicioni në të cilin aktualisht rrotullohet kanavacë.
t = 'rotateX (' + calcX + 'deg) rotateY (' + calcY + 'deg)'; currX = llogariX; currY = calcY;
21. Mbaro
Tani CSS është aplikuar në elementin kanavacë në këtë kod. Ruani faqen dhe shikojeni këtë në shfletues. Tani miu azhurnon plotësisht rrotullimin e kanavacës në mënyrë që të kthehet ndërsa lëviz miu. Sigurisht që të gjitha grimcat në atë hapësirë lëvizin me të në ekran.
kanavacë.style.WebkitTransform = t; canvas.style.msTransform = t; kanavacë.style.transformoj = t;
Ky artikull u botua fillimisht në revistën krijuese të krijimit të faqeve Web Designer. Blejçështja 271osepajtohem.
