インタラクティブ3Dタイポグラフィ効果を作る

Feb 3, 2026

操作方法

タイポグラフィは、メッセージを強化し、通信中の正しいコンテキストを提示する右の書体を選択すると、常にToolsの主要な部分を演奏しました。過去8年間で、Webデザイナーは持ち込む能力を持っています カスタムの書体 といった キネティックタイポグラフィ 彼らのデザインに、そしてプリントデザイナーによって楽しんだ人たちにも同様の誤植を持っています。

受賞歴のある、または「日のタイトルのサイト」を受け取っているところで紹介されているサイトの多くを見てください。これは、アニメ化された文字の形式、ユーザーの相互作用への反応的な動きから、中心段階のタイプフォームの大胆な使用に及ぶことができます（タイポグラフィファイルを安全に保ちます。 クラウドストレージ ）。

あなたがゼロフウスで注意を引くサイトを作成したい場合は、試してみてください。 ウェブサイトビルダー も。そして、あなたのサイトのパフォーマンスがトップで最適化されていることを確認してください ウェブホスティング 。

3Dフォント：9トップタイプのヒント

このチュートリアルでは、タイプ効果は文字の形状をマスクとして、動的に旋回して文字を通って移動する、いくつかの高速で自由流動性のある粒子の軌跡を使用します。この美しいアニメーションはありますが、これは上にレンダリングされるため HTML5キャンバス 要素、これは、それがスクリーンの周りを移動するにつれてマウスに向かって回転するために3Dで変換されます。これは、サイトヘッダーに最適です。また、アクションの呼び出しのためにユーザーの注意を引く必要がある場合には完璧です。

ここでチュートリアルファイルをダウンロードしてください

01.プロセスを開始します

コードIDE内のプロジェクトファイルから[スタート]フォルダを開きます。 Particle Objectクラスを作成することから、プロジェクトは開始されます。これはプロジェクト内のテキスト内の流れる画像を作成するために使用されます。 'sketch.js'ファイルを開き、以下の変数を追加してベースパーティクルの作成を開始します。

関数粒子（）{
  this.pos = createvector（ランダム（幅）、ランダム（（高さ -  100））。
  this.vel = createvector（0,0）;
  this.acc = createvector（0,0）;
  maxspeed = maxspeed;
  this.prevpos = this.pos.copy（）;

02.パーティクルを更新します

粒子を移動させるために、更新機能は各フレームを実行するであろうと、これは粒子の速度および速度への加速度を解決するであろう。速度は最終的には後で追加されるグローバル変数によって制限されます。速度は個々の粒子の位置に加えられる。 1つのパーティクルを作成することによって、何度も1回の千が画面上に作成されます。

 this.update = function（）{
  this.vel.add（this.acc）。
  this.vel.limit（this.maxspeed）。
  this.pos.add（this.vel）;
  この.ACC.MULT（0）;

03.フローで行きます

粒子を流れる動きを与えるために、ノイズによって発生する流れ場に続く。ここで作成された関数は、フローのベクトルを渡すことを可能にし、次にその後この関数の名前を続けます。ベクトル方向の力が粒子に加えられる。

 this.follow =関数（ベクトル）{
  var x = floor（this.pos.x / scl）。
  Var Y =床（this.pos.y / scl）;
  var index = x + y * cols;
  var force =ベクトル[インデックス];
  これはapplyforce（力）;

04.以下のように従うことはありません

この種の動きで容易に起こり得るすべての粒子を止めるために、粒子はそれらの位置に添加される非常に少量のランダム性を有するであろう。これにより、わずかな量の散乱が発生します。

 This.Scatter =機能（ベクトル）{
  this.pos.x + =ランダム（-0.9,0.9）。
  これは.pos.y + =ランダム（-0.9,0.9）;
  }
  これは.applyforce =関数（力）{
  this.acc.add（力）。

05.パーティクルを表示します

ここでのショー関数は粒子を表示します。最初に行うことは、線を作成するために薄い灰色の色の1ピクセルストロークを追加することです。行は、現在の位置から前のフレーム上の最後の位置まで描画されます。前の位置は次回ループを通して記憶されます。

 this.show = function（）{
  ストローク（180）;
  ストローク級（1）;
  行（this.pos.x、this.pos.y、this.prevpos.x、this.prevpos.y）。
  this.updatePrev（）;
  }
  this.updatePrev = function（）{
  this.prevpos.x = this.pos.x;
  this.prevpos.y = this.pos.y;

06.ラップします

粒子が画面の端に達すると、EDGES機能が機能し、そうであれば反対側に入るように折り返します。このセクションではX位置をお勧めしますので、画面の幅よりも大きい場合は検出されており、左端に送信され、その逆もできます。

 this.edges = function（）{
  if（this.pos.x＆gt; width）{
  this.pos.x = 0。
  this.updatePrev（）;
  }
  if（this.pos.x＆lt; 0）{
  this.pos.x = width。
  this.updatePrev（）;

07.ラッパーの喜び

このコードはエッジ検出の残りの部分であり、画面の上下のY軸上の粒子を検出します。ここでのブラケットはパーティクルクラス全体を包みます。このクラスを使用することによって、多くのパーティクルを作成することができます。

（this.pos.y;高さ）{
  これはpos.y = 0です。
  this.updatePrev（）;
  }
  if（this.pos.y <0）{
  これは= y =高さ;
  this.updatePrev（）;
  }
  }

08.多くの粒子を作る

粒子が作成されるようになるので、それは多くの粒子を作ることについて考える時間です。これを行うには、すべてのコードがParticle Functionクラスの上に移動できます。ここでは、システムを実行できるようにするためにいくつかのグローバル変数が宣言されています。彼らはコードの間に様々な時に呼び出されるので、彼らはそれから探求することができます。

 var inc = 0.1。
VAR SCL = 100、ZOFF = 0;
VAR COLS、行、移動= 0;
Var Particle = [];
var flowfield;
var img;
var maxspeed;
vart、calcx = 0、currx = 0、curry = 0、targetX = 0、targety = 0;

09.それを全部設定します

ここで宣言されているセットアップ機能は、開始時に画面がどのように見えるかを設定します。行われている最初の検出は、画面の幅が何であるかを見ることです。それが比較的大きい場合は、大きな画像がロードされ、キャンバスが作成され、これはCSSを介してディスプレイ内に収まるように拡大縮小されます。

関数setup（）{
  if（windowwidth＆gt; 1200）{
  IMG = LoadImage（ "Assets / Studio.png"）;
  var canvas = createCanvas（1920,630）;
  maxspeed = 10.5;

その他の画面

IFステートメントの残りの部分は異なる画面解像度をチェックし、その画面サイズに最も適した画像をロードします。同様に異なるサイズのキャンバス要素が作成されます。これは主に、必要以上のピクセルを扱うモバイルを停止することです。

（windowwidth＆gt; 900）{
  IMG = LOADIMAGE（ "アセット/スタジオタブレット-WIDE.PNG"）;
  var canvas = createCanvas（1200,394）;
  SCL = 60;
  maxspeed = 7;
  } そうしないと {
  IMG = LoadImage（ "資産/スタジオ - タブレット -  all.png"）;
  var canvas = createCanvas（700,230）;
  SCL = 40;
  maxspeed = 5;

11.グリッドを作ります

画面サイズが発生したら、キャンバスはindex.htmlページのヘッダdivタグ内に配置されます。幅と高さに基づいて、数列と行の数が取り上げられます。目に見えないグリッドのようなものです。最後に、フローフィールドに配列が設定されます。

 canvas.parent（ 'header'）;
COLS =階（幅/ SCL）;
行=フロア（高さ/ SCL）。
FlowField =新しい配列（COLS）;

粒子を作る

画面の幅に基づいてパーティクル数が設定されます。画面が1920ピクセルの場合、2500個のパーティクルが作成され、そこから下に移動します。 For Loopは新しいパーティクルを作成します。画面の背景色はほぼフルホワイトに設定されています。

 var numparticles = math.floor（（2500/1920）*幅）;
  （var i = 0; i nt; nt; nt; i ++）{
  粒子[i] =新粒子（）;
  }
  背景（245）;

13.スクリーンを描きます

すべての計算の結果は、描画関数内のフレームごとに画面上に描画されます。第一に、非常に低い不透明度の薄い灰色の長方形はスクリーンを埋めて前に描かれたものをフェードする。この後、粒子が充填されていないストロークで構成されているので、充填物はオフにされます。

関数draw（）{
  nosttroke（）;
  塗りつぶし（245,10）。
  四角形（0,0、幅、高さ）;
  nofill（）;
  Var Yoff = 0;

フローエフェクトを作成します

フローエフェクトを得るには、ノイズ値を更新するために、行と列を通って移動する 'for'のループがあります。次にこれらはノイズ値から角度に変更され、画面上の各位置のパーティクルを更新する準備ができている。

（60]（var y = 0; y; y ++）{ var xoff = 0; （var x = 0; x x; x ++）の場合 var index =（x + y * cols）; VAR角=ノイズ（XOFF、YOFF、ZOFF）* TWE_PI * 4; Var V = P5.Vector.fromangle（角度）;

15.配列を更新します

フローのアレイは角度で更新され、値は増加され、それが上がるたびに各位置のオフセットが増大する。これは複雑に思えるかもしれませんが、それは本当に画面上で追跡するための粒子のためのランダムな流動運動を作り出すだけです。

 v.setmag（1）;
  FlowField [Index] = V;
  XOFF + = INC;
  }
  yoff + = inc;
  ZOFF + = 0.001。

16.パーティクルを更新します

現在、粒子はすべてアレイ内にループされています。個々のパーティンパーティクルはフローフィールドに従うように言われ、更新し、画面のエッジを確認し、わずかに散らし、最後にshow関数を使用して画面に描画されます。ファイルを保存して「index.html」をテストして、粒子を移動するのを確認します。

（60]（var i = 0; i <粒子）{i ++）{ 粒子[i]。フォロー（フローフィールド）; 粒子[i] .update（）。粒子[i] edge（）。粒子[i]。段（）。粒子[i] .Show（）; }

17.テキストを追加します

テキストは上部に配置されているマスクです。これを行うために、正しい画像は粒子の上部に配置される。描画機能の閉鎖ブレースの前にこのコードを追加してください。ブラウザを保存して確認して、今すぐテキストを操作した効果を確認します。

画像（IMG、0,0）;

マウスの位置を検出します

マウスの位置は参照され、x値とy値は移動可能な角度にマッピングされます。 Y軸上では、これは-25から25になり、X軸は逆になります。描画関数が終了する前に、最後のコードが追加された後に残りのコードを配置する必要があります。

 targety = math.round（Map（MouseX、0、幅、-25,25））。
targetX = math.round（マップ（マウス、0、高さ、25、-25））;

19.場所を簡単にします

ターゲット位置は現在、度がゆっくりとターゲットに達するように少し緩和されます。これは、宛先から現在位置を脱離して低い数で乗算する古典的な緩和アルゴリズムを使用して作成されます。

 varvx =（targetX  -  currx）* 0.05;
var vy =（ターゲット - カレー）* 0.05;
calcx + = vx;
Calcy + = Vy;

20. CSSを書く

ここで 't'変数は計算値を取り、RotateXとRotateyの変換値を使用してCSS文字列に配置します。現在位置は、キャンバスが現在回転している位置から計算されます。

 T = 'RotateX（' + calcx + 'deg）Rotatey（' + Calcy + 'Deg）'。
currx = calcx
カレー= CALCY

21. OFFを終了します

このコードのCANVAS要素にCSSが適用されました。ページを保存してブラウザでこれをプレビューします。これで、マウスがマウスが動くと回転するように、マウスはキャンバスの回転を完全に更新します。もちろん、そのスペース内のすべての粒子がスクリーン上で移動します。

 CANVAS.Style.WebKitTransform = t;
canvas.style.mstransform = t;
CANVAS.Style.Transform = T;

この記事はもともとCreative Web Design Magazine Web Designerに公開されていました。購入 問題271 または 申し込む 。

関連記事：

デザイナーのための最高の無料フォント
完璧なオンライン読書体験への6つのステップ
無料のオンラインツールはあなたのフォントができることをあなたに示しています

インタラクティブ3Dタイポグラフィ効果を作る

01.プロセスを開始します

02.パーティクルを更新します

03.フローで行きます

04.以下のように従うことはありません

05.パーティクルを表示します

06.ラップします

07.ラッパーの喜び

08.多くの粒子を作る

09.それを全部設定します

その他の画面

11.グリッドを作ります

粒子を作る

13.スクリーンを描きます

フローエフェクトを作成します

15.配列を更新します

16.パーティクルを更新します

17.テキストを追加します

マウスの位置を検出します

19.場所を簡単にします

20. CSSを書く

21. OFFを終了します

操作方法 - 最も人気のある記事

Photoshopで深さを追加するためにペンツールとテクスチャを使用する

より良い生き物を描く17の方法

すぐに手をスケッチする方法

あなたのウェブサイトにグリッチ効果を追加する

X粒子で葉を成長させることを学ぶ

Daz StudioとZbrushの間の移動方法

VRゲーミングワールドを作るための13のヒント

PhotoshopでアニメーションWebバナーを作成する方法

カテゴリ