JavaScriptで誤ったテキスト効果を作成する

Sep 12, 2025

操作方法

A screenshot from Patrick Heng's website including moving typography

テキストやタイポグラフィに効果を紹介することで、全体の新しい視点を追加できます。 ユーザー体験 ウェブサイト上。しかし、テキストは読み込まれ、そして効果を伴って賢くまたは賢くなることはそれの目的を倒すことができます。

だから賢い、賢くてください、しかしあなたのものであることを確認してください キネティックタイポグラフィ 効果は実際には動作します Patrick Hengのウェブサイト - 上の画像に紹介されています。どのように調べるために読んでください...

1.イントロテキストを作成します

開くプロジェクトファイルそして、velocity.jsとblast.jsライブラリがあることがわかります。 BelocityはTweenエンジンです。各テキスト部分を異なる間隔で移動させるための3つのオフセット変数があります。

＆lt;スクリプト＆gt;
var offset1 = 0;
var offset2 = 0;
var offset3 = 0;
＆lt; / script＆gt;

2.テキストを分割します

BLASTを使用して、各テキスト文字は独自のSPAN要素に分割されます。その後、テキストの最上層はループスルーし、各文字のオフセットが長くなるため、独立してアニメートします。

 $（ "H1"）。Blast（{
  区切り文字：「キャラクター」
}）;）
関数anim（）{
  var $ spans = $（ "＃top"）。（ 'span'）を見つけます。
  $ spans.each（function（）{
  オフセット1 + = 40;

3.ベロシティを追加します

これで、ベロシティライブラリは、文字が上に移動してフェードインするように動きと不透明度を追加します。各文字はオフセットされ、各文字に期間と緩和が設定されます。

 $（この）.velocity（{
  翻訳：-100、
  不透明度：1
  {{
  遅延：オフセット1、
  期間：800、
  緩和： "easeoutback"
  }）;）
  }）;）

4.アクションを呼び出します

これで 'anim'関数が呼び出され、これはアニメーションを開始するようにトリガーされます。 'SetTimeout'関数は、黄色になるテキストの2番目のブロックをステージングするようになりました。やはり、最初の例のように速度を使用してトリガーされます。

 anim（）;
setTimeout（function（）{
  var $ spans = $（ "＃middle"）。（ 'span'）を見つけます。
  $ spans.each（function（）{
  オフセット2 + = 40。
  $（この）.velocity（{
  翻訳：-100、
  不透明度：0.8
  {

上に移動する

遅延、期間および緩和は、2番目の黄色のテキストが正しく移動するように設定されています。その後、オレンジ色の最後のテキストは次の「SetTimeout」関数で制御して、これを始める前にもう少し長く移動します。

遅延：オフセット2、
  期間：800、
  緩和： "easeoutback"
  }）;）
  }）;）
100）}。
setTimeout（function（）{
  var $ spans = $（ "＃bottom"）。（ 'span'）を見つけます。

6.最後の文字を追加します

今最後の文字が所定の位置に移動されます。これは同じ効果を与えます Patrick Hengのサイトテキストの層が移動する。 Patrickは実際にはテキストを移動するためにWebGLを使用しますが、これはDOM要素のより単純な方法です。

 $ spans.each（function（）{
  オフセット3 + = 40;
  $（この）.velocity（{
  翻訳：-100、
  不透明度：0.8
  {{
  遅延：オフセット3、
  期間：800、
  緩和： "easeoutback"
  }）;）
  }）;）
}、150）

生成ロンドンの詳細

Generate graphic — Richard Rutter、Sarah Parmenter、Bruce Lawsonを参照してください。

タイポグラフィと共同設立のための愛と魅力があるフォントデック、先駆的なウェブフォントサービス。自己任命されたwebタイポグラフィのエヴァンゲリストとして、リチャードはClearleftのチーフオーガナイザーです。アンパサンド Webタイポグラフィ会議。

London 2018年の生成では、彼のワークショップはあなたがすべての形やサイズの画面に適応する、魅力的、適切な、独特の、表現力や読みやすいウェブタイポグラフィを持つウェブサイトを作成するのに役立ちます。あなたの読者のための最良の経験を設計し開発するために、何世紀にもわたる古い工芸品を最先端の技術と組み合わせる方法を学びます。

一日の間に、あなたはあなたがあなたと一緒に取り戻すことができる詳細な例のサイトに新しいテクニックごとに各新しいテクニックを適用して、あなたは実践的な活動に参加します。これは将来参照するための完璧なリソースを形成します。それで十分ではないならば、すべての出席者はリチャードの絶賛の無料の電子コピーを歩きますウェブタイポグラフィ本。

お見逃しなく、今あなたのチケットを入手してください

関連記事：

1,000プロジェクトで完璧なJavaScript
グラフィックデザイナーのためのProデジタルタイプのヒント
7素晴らしいウェブタイプのリソース

JavaScriptで誤ったテキスト効果を作成する

1.イントロテキストを作成します

2.テキストを分割します

3.ベロシティを追加します

4.アクションを呼び出します

上に移動する

6.最後の文字を追加します

生成ロンドンの詳細

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

Facebookのプライバシー設定：プロフィールをプライベートに保つ方法

オールドスクールのアナグリフ効果を作成する

SASSを使用したサイト

CSSでグリッチテキストとイメージ効果を作成する方法

CSSを使用してブラウザでコラージュエフェクトを作成する

錆から始めよう

開発者のスキルを開発するための4つのヒント

HTMLキャンバス入門

カテゴリ