Proveďte interaktivní 3D typografické efekty

Feb 2, 2026

jak

Typografie vždy hrála hlavní část v arzenálu návrháře nástrojů, protože vyberou správné písmo, které posílí zprávu a prezentovat správný kontext pro to, co je sděleno. Za posledních osm let mají web designéři schopnost přivést Vlastní písma jako Kinetická typografie k jejich návrhu a mít podobnou typografickou kontrolu těm, kteří si užívali designéry tisku.

Podívejte se na mnoho z míst, které jsou uvedeny jako ocenění nebo přijímání 'stránky dne' tituly a brzy si všimnete, že jejich použití typografie se stává ústředním bodem designu, což jim umožňuje vzrůst nad jejich soutěži. To se může pohybovat od formy animovaných písmen, reaktivním pohybu do uživatelských interakcí, odvážné použití typových formulářů přijímání středové fáze (uchovávat soubory typografie v bezpečí cloudové úložiště ).

Pokud chcete vytvořit pozornost popadl místo s nulovým rozrušením, zkuste Webové stránky Builder. také. A ujistěte se, že výkon vašeho webu je optimalizován s vrcholem web hosting .

3D fonty: 9 Top typu Tipy

V tomto tutoriálu bude typový efekt používat tvary písmen jako masku na některé rychlé, volně tekoucí části částic, které budou dynamicky spirála a pohybují se písmeny. Nejen, že tam bude tato krásná animace, ale protože to bude vykresleno na Html5 plátno Prvek, bude to transformováno ve 3D pro otáčení směrem k myši, jak se pohybuje kolem obrazovky. To je ideální pro záhlaví webu nebo jen když potřebujete chytit pozornost uživatele pro volání na akci.

Stáhněte si tutoriálové soubory zde

01. Spusťte proces

Otevřete složku 'Start' ze souborů projektu v kódu IDE. Projekt začne vytvářet třídu objektu částic. To bude použito k vytvoření tekoucího snímků v textu v projektu. Otevřete soubor 'skica.js' a přidejte následující proměnnou pro vytvoření základové částice.

 Funkční částice () {
  this.pos = CreateVector (náhodné (šířka), náhodné (výška - 100));
  This.vel = CreateVector (0, 0);
  this.acc = CreateVector (0, 0);
  this.maxspeed = Maxspeed;
  This.prevpos = this.pos.Copy ();

02. Aktualizujte částici

Za účelem přesunutí částic bude funkce aktualizace spustit každý snímek, to bude fungovat rychlost částice a zrychlení na rychlost. Rychlost bude nakonec omezena globální proměnnou, která bude přidána později. Rychlost se přidá do polohy jednotlivých částic. Vytvořením jedné částice bude na obrazovce kdy jednou vytvořeno několik tisíc.

 this.Update = funkce () {
  this.vel.add (this.ACC);
  This.vel.limit (this.maxspeed);
  this.pos.add (this.vel);
  this.acc.mult (0);
  }

03. Jděte s tokem

Dát částice jejich tekoucí pohyb, bude následovat průtokové pole generované hlukem. Funkce vytvořená zde umožňuje, aby vektoru průtoku, který má být předán a bude následován, a proto je to název této funkce. Síla ve směru vektoru bude aplikována na částici.

 this.follow = funkce (vektory) {
  var x = podlaha (this.pos.x / scl);
  var y = podlaha (this.pos.y / scl);
  var index = x + y * cols;
  Var Force = vektory [index];
  this.pplyforce (síla);
  }

04. Následujte, ale ne příliš úzce

Aby se všechny částice zastavily spolu, což se může snadno stát s tímto druhem pohybu, částice budou mít velmi malé množství náhodnosti přidané do jejich polohy. To způsobí mírné množství rozptylu.

 Tento.scater = funkce (vektory) {
  this.pos.x + = náhodný (-0,9, 0,9);
  this.pos.y + = náhodný (-0,9, 0,9);
  }
  this.Applyforce = funkce (síla) {
  this.acc.add (síla);
  }

05. Zobrazte částici

Funkce Zobrazit zde zobrazuje částici. První věc, kterou dělá, je přidat jeden pixelový zdvih světle šedé barvy pro vytvoření řádku. Linka je čerpána z aktuální polohy do poslední pozice na předchozí rámec. Předchozí pozice je uložena příště přes smyčku.

 this.show = funkce () {
  mrtvice (180);
  Zábavní váha (1);
  řádek (this.pos.x, this.pos.y, this.prevpos.x, this.prevpos.y);
  Tento.Updateprev ();
  }
  this.Updateprev = funkce () {
  This.prevpos.x = this.pos.x;
  This.prevpos.y = this.pos.y;
  }

06. Zabalte se

Funkce hrany funguje, pokud částice dosáhne okraje obrazovky, a pokud ano, zabalí ji, aby přišli na opačnou stranu. Tato část se zabývá polohou X, takže detekuje, zda je větší než šířka obrazovky, pak jej odesílá na levé okraj a naopak.

 this.edges = funkce () {
  if (this.pos.x & gt; šířka) {
  this.pos.x = 0;
  Tento.Updateprev ();
  }
  IF (this.pos.x <0) {
  this.pos.x = šířka;
  Tento.Updateprev ();
  }

07. potěšení obalu

Tento kód je zbytek detekce okrajů a detekuje částici na ose Y pro horní a dolní část obrazovky. Konzoly zde zabalí celou třídu částic. To znamená použití této třídy mnoho částic lze vytvořit.

 IF (this.pos.y & gt; výška) {
  this.pos.y = 0;
  tento.Updateprev ();
  }
  IF (this.pos.y & lt; 0) {
  this.pos.y = výška;
  Tento.Updateprev ();
  }
  }
}

08. Udělejte mnoho částic

Nyní, jak je částice vytvořena, je čas přemýšlet o tom, že mnoho částic. K tomuto účelu lze všechny našeho kódu jít nad třídou funkce částic. Zde je vyhlášeno množství globálních proměnných, které umožní spuštění systému. Během kódu budou volány v různých časech, takže pak mohou být prozkoumány.

 var inc = 0,1;
VAR SCL = 100, ZOFF = 0;
var složí, řádky, pohyb = 0;
var částic = [];
var flowfield;
var img;
var Maxspeed;
VAR T, CALCX = 0, coldy = 0, currx = 0, kari = 0, targetx = 0, cílový = 0;

09. Nastavte to všechno nahoru

Funkce nastavení, prohlásil zde, nastaví, jak se obrazovka podívá na začátek. První detekce je provedena je vidět, jaká je šířka obrazovky. Pokud je poměrně velký, je naloženo velký obraz, je vytvořen plátno, a to je zmenšeno přes CSS, aby se vešly na displeji.

 Nastavení funkce () {
  if (oknowidth & gt; 1200) {
  img = loadimage ("aktiva / studio.png");
  var canvas = createCanvas (1920, 630);
  Maxspeed = 10,5;
  }

10. Ostatní obrazovky

Zbytek příkazu IF kontroluje různé rozlišení obrazovky a načte obrázek, který je nejvhodnější pro tuto velikost obrazovky. Podobně jsou vytvořeny různé velikosti plátno. To je především zastavit mobilní řešení více pixelů, než je to.

, pokud (oknowidth & gt; 900) {
  img = loadimage ("aktiva / studio-tablet-wide.png");
  var canvas = createCanvas (1200, 394);
  SCL = 60;
  maxspeed = 7;
  } else {
  img = loadimage ("aktiva / studio-tablet-tall.png");
  var canvas = createCanvas (700, 230);
  SCL = 40;
  maxspeed = 5;
  }

11. Udělejte mřížku

Jakmile je velikost obrazovky vypracována, plátno je umístěno uvnitř značky záhlaví DIV v stránce index.html. Řada sloupců a řad se zpracovává na základě šířky a výšky; Je to trochu jako neviditelná mřížka. Konečně je pro flow pole nastaveno pole.

 plátno.parent ('záhlaví');
Cols = podlaha (šířka / scl);
řádky = podlaha (výška / scl);
Flowfield = New Array (Cols);

12. Proveďte částice

Počet částic je nastaven na základě šířky obrazovky - pokud je obrazovka 1920 pixelů široká, pak bude vytvořena 2500 částic a odtud se pohybuje směrem dolů. A pro smyčku vytváří nové částice. Barva pozadí obrazovky je nastavena na téměř plnou bílou.

 var numparticles = math.floor ((2500/1920) * šířka);
  pro (var i = 0; i & lt; numparticles; i ++) {
  částice [i] = nová částice ();
  }
  pozadí (245);
}

13. Nakreslete obrazovku

Výsledky všech výpočtů jsou nakresleny na obrazovce každý rámeček v remízu. Za prvé, světle šedý obdélník s velmi nízkou neprůhledností vyplní obrazovku, aby fade, co bylo dříve kresleno. Poté je nakreslena, výplň je vypnuta, protože částice budou tvořeny tahy, které nejsou vyplněny.

 Funkce Draw () {
  nostoke ();
  výplň (245, 10);
  RECT (0, 0, šířka, výška);
  Nofill ();
  var yoff = 0;

14. Vytvořte efekt průtoku

Chcete-li získat efekt průtoku, jsou dva 'pro' smyčky pohybující se přes řádky a sloupce pro aktualizaci hodnot šumu. Ty se pak změní na úhly z hodnoty hluku připravené k aktualizaci částic pro každou z poloh na obrazovce.

 pro (var y = 0; y & lt; řádky; y ++) {
  var xoff = 0;
  pro (var x = 0; x & lt; cols; x ++) {
  var index = (x + y * cols);
  var úhel = šum (xoff, yoff, Zoff) * dva_pi * 4;
  var v = p5.vector.Fromangle (úhel);

15. Aktualizujte pole

Pole průtoku se aktualizuje s úhlem a hodnoty se zvyšují tak, aby byl posun každé polohy zvýšen pokaždé, když jde nahoru. To by se mohlo zdát komplikované, ale to opravdu jen vytváří náhodné tekoucí pohyb, aby se částice následovaly na obrazovce.

 V.SETMAG (1);
  Flowfield [index] = v;
  Xoff + = Inc;
  }
  yoff + = inc;
  Zoff + = 0,001;
  }

16. Aktualizujte částice

Částice jsou nyní v jejich poli smyčky. Každá jednotlivá částice je řečeno, aby se řídit flow flow, aktualizovat, zaškrtněte okraje obrazovky, lehce rozptýlit a nakonec se nakreslí na obrazovce pomocí funkce Zobrazit. Uložte soubor a otestujte "index.html", abyste viděli částice pohybující se.

 pro (var i = 0; I & lt; částice.length; i ++) {
  částice [i] .follow (flowfield);
  částice [i] .Update ();
  částice [i] .edges ();
  částice [i] .scater ();
  částice [i] .show ();
  }
}

17. Přidejte text

Text je maska, která je umístěna přes vrchol. K tomu je správný obraz umístěn přes horní část částic. Přidat tento kód před uzavřenou rovnováží funkce Draw. ULOŽTE A ZKONTROLUJTE prohlížeče, abyste viděli efekt fungující s textem.

 Image (IMG, 0, 0);

18. Zjistěte polohu myši

Poloha myši se odkazuje a hodnoty X a Y jsou mapovány na stupeň úhly, které lze přesunout. Na ose Y bude to -25 až 25 a naopak pro osu X. Zbývající kód by měl být umístěn po přidání posledního kódu, před koncem funkce Draw.

 CIGHTY = math.round (MAP (MAPEX, 0, šířka, -25, 25);
Targetx = math.round (Mapa (Mapa, 0, Výška, 25, -25);

19. Usnadněte se na místo

Cílová pozice je nyní dána trochu uvolňování, aby se stupňů pomalu dosáhli svého cíle. To je vytvořeno pomocí klasického uvolňujícího algoritmu odebrání aktuální polohy z cíle a vynásobením nízkým počtem.

 var vx = (targetx - currx) * 0,05;
var vy = (cílový - kari) * 0,05;
CALCX + = VX;
calcy + = up;

20. Napište CSS

Proměnná 'T' zde vezme vypočtené hodnoty a umístí je do řetězce CSS pomocí transformačních hodnot rotatexu a rotatey. Současná poloha se vypočítá z pozice, na které se plátno v současné době otočí.

 t = 'rotatex (' + calkx + 'deg) rotatey (' + calcy + 'deg);
Currx = CalkX;
kari = calcy;

21. Dokončit

Nyní je CSS aplikován na prvek plátna v tomto kódu. Uložte stránku a zobrazte jej v prohlížeči. Nyní myš plně aktualizuje otáčení plátna tak, aby se změnila jako myš pohyby. Samozřejmě všechny částice v tomto prostoru se pohybují s ním na obrazovce.

 canvas.style.webKitTransform = t;
canvas.style.mtransform = t;
canvas.style.transform = t;

Tento článek byl původně publikován v Creative Web Design Magazine Web Designer. Koupit Vydání 271. nebo předplatit .

Související články:

70 nejlepších fondů pro návrháře
6 kroků k dokonalému online čtení zkušenosti
Zdarma Online Tool vám ukáže, co vaše písma mohou dělat

Proveďte interaktivní 3D typografické efekty

01. Spusťte proces

02. Aktualizujte částici

03. Jděte s tokem

04. Následujte, ale ne příliš úzce

05. Zobrazte částici

06. Zabalte se

07. potěšení obalu

08. Udělejte mnoho částic

09. Nastavte to všechno nahoru

10. Ostatní obrazovky

11. Udělejte mřížku

12. Proveďte částice

13. Nakreslete obrazovku

14. Vytvořte efekt průtoku

15. Aktualizujte pole

16. Aktualizujte částice

17. Přidejte text

18. Zjistěte polohu myši

19. Usnadněte se na místo

20. Napište CSS

21. Dokončit

jak - Nejoblíbenější články

Základní vodítko k procházení v oboru

Vytvořit anaglyfický efekt starého škola

Použijte brain.js vybudovat neurální síť

Jak vytvořit pin-up umění

Sestavte hlasový ovládaný UI

Vytvořte si vlastní kaligrafický kartáč v Illustrator

Malování zlomyslného zajíc v akvarelu

Jak malovat snů fantasy lesní scény

Kategorie