Machen Sie interaktive 3D-Typografie-Effekte

Die Typografie hat in jedem Arsenal von Tools eines Designers immer einen wichtigen Teil gespielt, da sie die richtige Schrift auswählen, die die Nachricht erhöht und den richtigen Kontext für das, was mitgeteilt wird, erweitert wird. In den letzten acht Jahren hatten Webdesigner die Fähigkeit, einzubringen Benutzerdefinierte Schriften sowie kinetische Typografie zu ihrem Design und haben eine ähnliche typografische Steuerung, die von Druckdesignern genossen werden.

Schauen Sie sich viele der Websites an, die als preisgekrönte oder empfangene Site des Tages-Titels gekennzeichnet sind, und Sie werden bald feststellen, dass deren Verwendung von Typografie der Entwicklung des Designs zentriert wird, wodurch sie über ihren Wettbewerb steigen können. Dies kann von animierten Buchstabenformularen, einer reaktiven Bewegung bis hin zu den Benutzerwechselwirkungen reichen, auf die mutige Verwendung von Typenformularen, die die Mittelstufe aufnehmen (Halten Sie Ihre Typografie-Dateien sicher in Cloud-Speicherung. ).

Wenn Sie eine Aufmerksamkeit erstellen möchten, können Sie mit null Aufregung aufmerksam machen Webseitenersteller auch. Und stellen Sie sicher, dass die Leistung Ihrer Website mit der Oberseite optimiert ist Web-Hosting .

• 3D-Schriftarten: 9 Top-Tipps von oben

In diesem Tutorial verwendet der Typeffekt die Formen der Buchstaben als Maske zu einigen schnellen, frei fließenden Partikeln, die dynamisch wirbeln und bewegen sich durch die Buchstaben. Es wird nicht nur diese schöne Animation geben, sondern da dies auf die HTML5-Leinwand Element, das in 3D umgewandelt wird, um sich zur Maus zu drehen, während sie sich um den Bildschirm bewegt. Dies ist ideal für Site-Header oder nur, wenn Sie die Aufmerksamkeit des Benutzers auf sich aufmerksam machen müssen, um einen Anruf zu tätigen.

Laden Sie die Tutorial-Dateien hier herunter

01. Starten Sie den Prozess

Öffnen Sie den Ordner "Start" aus den Projektdateien in Ihrem Code IDE. Das Projekt wird beginnen, indem er die Partikelobjektklasse erstellt. Dadurch wird verwendet, um die fließende Bilder innerhalb des Projekts im Projekt zu erstellen. Öffnen Sie die Datei 'sketh.js' und fügen Sie die folgende Variable hinzu, um das Erstellen des Basispartikes zu erstellen.

 Funktion Partikel () {
  this.POS = CreateVector (zufällig (Breite), zufällig ((Höhe - 100)));
  diesen.vel = CreateVector (0, 0);
  this.acc = CreateVector (0, 0);
  This.maxspeed = Maxspeed;
  This.Prevos = this.pos.copy (); 

02. Aktualisieren Sie das Partikel

Um das Partikel zu bewegen, wird eine Aktualisierungsfunktion jedes Rahmens ausgeführt, dadurch wird die Geschwindigkeit des Partikels und der Beschleunigung der Geschwindigkeit ausgeführt. Die Geschwindigkeit wird schließlich durch eine globale Variable begrenzt, die später hinzugefügt wird. Die Geschwindigkeit wird der Position des einzelnen Partikels hinzugefügt. Durch das Erstellen eines Partikels werden auf dem Bildschirm mehrere Tausend auf dem Bildschirm erstellt.

 diese.update = function () {
  diese.vel.add (the.acc);
  the.vel.limit (the.maxspeed);
  this.pos.add (the.vel);
  das.Accc.mult (0);
  } 

03. Gehen Sie mit dem Fluss

Um die Partikel ihre fließende Bewegung zu geben, wird ein durch Rauschen erzeugtes Durchflussfeld befolgt. Die hier erstellte Funktion ermöglicht es, dass der Vektor des Fließens eingeleitet wird, und erfolgt dann der Name dieser Funktion. Die Kraft der Vektorrichtung wird auf das Partikel aufgebracht.

 Dies. Follow = Funktion (Vektoren) {
  var x = boden (the.pos.x / scl);
  var y = boden (the.pos.y / scl);
  VAR Index = x + y * cols;
  VAR Kraft = Vektoren [Index];
  das.Applyforce (Force);
  } 

04. Folgen aber nicht zu eng

Um alle zusammengelegten Partikel zu stoppen, die mit dieser Art von Bewegung leicht auftreten können, haben die Partikel eine sehr geringe Menge an Zufälligkeit, die ihrer Position hinzugefügt wird. Dies führt zu einer leichten Streuung.

 diese.scatter = Funktion (Vektoren) {
  this.pos.x + = zufällig (-0,9, 0,9);
  This.POS.Y + = zufällig (-0,9, 0,9);
  }
  das.Applyforce = Funktion (Kraft) {
  this.acc.add (Force);
  } 

05. Zeigen Sie das Partikel an

Die Show-Funktion hier zeigt das Partikel an. Das erste, was es tut, ist ein Pixelhub einer hellgrauen Farbe hinzuzufügen, um die Zeile zu erstellen. Die Linie wird von seiner aktuellen Position in die letzte Position auf dem vorherigen Rahmen gezogen. Die vorherige Position wird zum nächsten Mal durch die Schleife gespeichert.

 The.Show = Funktion () {
  Schlaganfall (180);
  Strichgewicht (1);
  Linie (This.POS.X, This.Pos.Y, This.Provos.x, This.Prevos.Y);
  This.updatePrev ();
  }
  this.updatePrev = Funktion () {
  This.Prevos.x = this.pos.x;
  das.PREVPOS.Y = dieses.pos.y;
  } 

06. Wickeln Sie herum

Die Kantenfunktion funktioniert heraus, wenn das Partikel den Rand des Bildschirms erreicht und umschließt, um auf die gegenüberliegende Seite zu kommen. Dieser Abschnitt befasst sich mit der x-Position, sodass er erkannt wird, wenn er größer als die Breite des Bildschirms ist, dann sendet es an die linke Kante und umgekehrt.

 Diese.edges = Funktion () {
  if (the.pos.x & gt; breite) {
  this.pos.x = 0;
  This.updatePrev ();
  }
  wenn (the.pos.x & lt; 0) {
  This.POS.X = Breite;
  This.updatePrev ();
  } 

07. Wrapper's Freude

Dieser Code ist der Rest der Kantenerkennung und erfasst das Partikel auf der Y-Achse nach oben und unten auf dem Bildschirm. Die Klammern verwerten hier die gesamte Partikelklasse. Dies bedeutet, dass diese Klasse viele Partikel verwendet werden können.

 Wenn (the.pos.y & gt; höhe) {
  das.POS.Y = 0;
  This.updatePrev ();
  }
  wenn (the.pos.y & lt; 0) {
  das.POS.Y = Höhe;
  This.updatePrev ();
  }
  }
} 

08. Machen Sie viele Partikel

Nun, da das Partikel erzeugt wird, ist es Zeit, über viele Partikel nachzudenken. Dazu kann all unser Code über die Partikelfunktionsklasse gehen. Hier werden eine Reihe globaler Variablen deklariert, damit das System ausgeführt werden kann. Sie werden während des Codes zu verschiedenen Zeiten aufgerufen, sodass sie dann erkundet werden können.

 var inc = 0,1;
var scl = 100, zoff = 0;
Var-Cols, Reihen, Bewegung = 0;
VAR-Partikel = [];
VAR FlowField;
VAR IMG;
VAR Maxspeed;
var t, calcx = 0, calcy = 0, currx = 0, curry = 0, targetx = 0, targety = 0; 

09. Setze alles auf

Die hier deklarierte Setup-Funktion setzt, wie der Bildschirm den Start angeht. Die erste Erkennung ist, um zu sehen, was die Breite des Bildschirms ist. Wenn es relativ groß ist, wird ein großes Bild geladen, die Leinwand wird erstellt, und dies wird über CSS skaliert, um in die Anzeige passen.

 Funktion Setup () {
  if (fensterwidth & gt; 1200) {
  img = loadimage ("Assets / Studio.png");
  VAR Canvas = CreateCanvas (1920, 630);
  Maxspeed = 10.5;
  } 

10. Andere Bildschirme.

Der Rest der IF-Anweisung prüft verschiedene Bildschirmauflösungen und lädt ein Bild, das für diese Bildschirmgröße am besten geeignet ist. Ebenso werden unterschiedlich große Leinwandelemente erstellt. Dies ist hauptsächlich, um einen mobilen Umgang mit mehr Pixeln zu stoppen, als dies zu tun hat.

 sonst, wenn (fensterwidth & gt; 900) {
  img = loadimage ("Assets / Studio-Tablet-Wide.png");
  VAR CANVAS = CreateCanvas (1200, 394);
  scl = 60;
  Maxspeed = 7;
  } else {
  img = loadimage ("Assets / Studio-Tablet-tall.png");
  VAR CANVAS = CreateCanvas (700, 230);
  scl = 40;
  Maxspeed = 5;
  } 

11. Machen Sie ein Gitter

Sobald die Bildschirmgröße ausgearbeitet wird, wird die Leinwand in das Header DIV-Tag in der Seite Index.html platziert. Eine Anzahl von Säulen und Reihen werden basierend auf der Breite und der Höhe ausgearbeitet. Es ist ein bisschen wie ein unsichtbares Gitter. Schließlich ist ein Array für das Fließfeld eingestellt.

 Canvas.parent ('Header');
Cols = Boden (Breite / SCL);
Reihen = Boden (Höhe / SCL);
Flowfield = Neues Array (COLS); 

12. Machen Sie Partikel

Die Anzahl der Partikel wird basierend auf der Breite des Bildschirms eingerichtet. Wenn der Bildschirm 1920 Pixel breit ist, werden dann 2500 Teilchen erstellt und es bewegt sich von dort nach unten. Eine für Schleife erzeugt die neuen Partikel. Die Hintergrundfarbe des Bildschirms ist auf fast volle Weiß eingestellt.

 VAR-NUMPARTICES = MATH.FLOOR ((2500/1920) * Breite);
  für (var i = 0; I & lt; Numparticles; i ++) {
  Partikel [I] = Neue Partikel ();
  }
  Hintergrund (245);
} 

13. Zeichnen Sie den Bildschirm

Die Ergebnisse aller Berechnungen werden in jedem Rahmen in der Zeichnungsfunktion auf dem Bildschirm gezeichnet. Erstens füllt ein hellgraues Rechteck mit einer sehr niedrigen Deckkraft den Bildschirm, um zu verblassen, was zuvor gezogen wurde. Danach wird die Füllung ausgeschaltet, da die Partikel aus Strichen bestehen, nicht füllt.

 Funktionsabnahme () {
  nostroke ();
  Füllen (245, 10);
  (0, 0, Breite, Höhe);
  noFill ();
  Var yoff = 0; 

14. Erstellen Sie einen Flow-Effekt

Um den Flow-Effekt zu erhalten, gibt es zwei 'für' Loops, die sich durch die Zeilen und Spalten bewegen, um die Geräuschwerte zu aktualisieren. Diese werden dann in Winkel von dem Rauschwert geändert, der bereit ist, die Partikel für jede der Positionen auf dem Bildschirm zu aktualisieren.

 für (var y = 0; y & lt; Reihen; y ++) {
  var xoff = 0;
  für (var x = 0; x & lt; cols; x ++) {
  VAR Index = (x + y * cols);
  VRAN-Winkel = Rauschen (Xoff, Yoff, Zoff) * Two_pi * 4;
  VAR V = P5.Vector.Fromangle (Winkel); 

15. Aktualisieren Sie das Array

Die Strömungsanordnung wird mit dem Winkel aktualisiert und die Werte werden erhöht, so dass der Versatz jeder Position jedes Mal erhöht wird, wenn er steigt. Dies mag kompliziert erscheinen, aber er schafft wirklich zufällige fließende Bewegung, um die Partikel auf dem Bildschirm zu folgen.

 v.setmag (1);
  FlowField [Index] = v;
  xoff + = Inc;
  }
  yoff + = Inc;
  zoff + = 0,001;
  } 

16. Aktualisieren Sie die Partikel

Nun sind die Partikel in ihrem Array durchlaufen. Jedes einzelne Teilchen soll dem Fließfeld folgen, um zu aktualisieren, die Kanten des Bildschirms zu überprüfen, streuen und schließlich mit der Showfunktion auf dem Bildschirm gezeichnet werden. Speichern Sie die Datei und testen Sie den "Index.html", um die sich bewegenden Partikel zu sehen.

 für (var i = 0; i & lt; particles.längen; i ++) {
  Partikel [i] .follow (Flowfield);
  Partikel [i] .update ();
  Partikel [i] .edges ();
  Partikel [I] .ScATTE ();
  Partikel [I] .Show ();
  }
} 

17. Fügen Sie den Text hinzu

Der Text ist eine Maske, die über der Oberseite platziert wird. Dazu wird das richtige Bild über die Oberseite der Partikel gelegt. Fügen Sie diesen Code vor der Abschlussstütze der Zeichnungsfunktion hinzu. Speichern und überprüfen Sie den Browser, um den Effekt jetzt mit dem Text zu sehen.

 Bild (IMG, 0, 0); 

18. Erkennen Sie die Mausposition

Die Mausposition wird referenziert und die X- und Y-Werte werden auf Gradwinkel abgebildet, die bewegt werden können. Auf der y-Achse beträgt dies -25 bis 25 und umgekehrt für die X-Achse. Der verbleibende Code sollte vor dem Ende der Zeichnungsfunktion, nachdem der letzte Code hinzugefügt wurde, platziert werden.

 Targety = Math.Rund (MAP (MOUSEX, 0, Breite, -25, 25));
TargetX = Math.Rund (MAP (Mousey, 0, Höhe, 25, -25)); 

19. Leichtigkeit

Die Zielposition wird nun ein wenig Lockerung gegeben, so dass die Grade langsam ihr Ziel erreichen. Dies wird mit einem klassischen Lockeringalgorithmus erstellt, der die aktuelle Position vom Ziel abheben und mit einer niedrigen Anzahl multipliziert.

 VAR VX = (TargetX - Currx) * 0,05;
var vy = (targety - curry) * 0,05;
calcx + = vx;
calcy + = vy; 

20. Schreiben Sie die CSS

Die Variable 't' nimmt hier die berechneten Werte an und legt sie mit den Transformationswerten von Rotatex und Drehry in eine CSS-Zeichenfolge ein. Die aktuelle Position wird aus der Position berechnet, in der der Leinwand derzeit gedreht wird.

 T = 'rotatex (' + calcx + 'dg) drehen (' + calcy + 'dg)';
currx = calcx;
Curry = Calcy; 

21. Beenden Sie ab

Nun wird der CSS in diesem Code auf das Canvas-Element angewendet. Speichern Sie die Seite und sehen Sie sich in der Browser an. Nun aktualisiert die Maus die Drehung der Leinwand vollständig, so dass es sich umdreht, wenn sich die Maus bewegt. Natürlich bewegen sich alle Partikel in diesem Raum auf dem Bildschirm mit.

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

Dieser Artikel wurde ursprünglich im Creative Web Design Magazine Webdesigner veröffentlicht. Kaufen Ausgabe 271. oder abonnieren .

Zum Thema passende Artikel:

• 70 Beste Freie Schriftarten für Designer
• 6 Schritte zum perfekten Online-Leseerfahrung
• Das kostenlose Online-Tool zeigt Ihnen, was Ihre Schriftarten tun können