アニメーション3Dテキスト効果を作成する

Sep 13, 2025

操作方法

失恋カナダの jam3. 失われた愛の周りの永続的な感情について本当の心を持つ美しく暗い、モバイルの準備ができているインタラクティブな詩です。 the ウェブサイトのレイアウト HTML5を使用して構築されました GSAP. ライブラリーの電源を入れるアニメーション、最も視覚的に顕著な機能の1つは、本当にLoveの詩を生き物にもたらすアニメーションの3Dテキストです。

インタラクティブな3Dタイポグラフィ効果を作ります

それは地獄のように印象的に見えます、そしてそれはあなた自身の作業に取り入れるのは難しくありません。 ユーザー体験 ;これがどのようにして行われているかです。

あなた自身の魅力的なサイトを作りたいですか？お試しください ウェブサイトビルダー 道具、そして右を拾うことによって滑らかに走ることを維持する ウェブホスティング サービス。

Love Lost's 3D text comes right out of the screen at the viewer — Love Lostの3Dテキストが視聴者の画面から外れます

01. HTML文書を開始します

最初のステップは、HTML文書の構造を定義することです。これには、ヘッドとボディセクションを含む文書を開始するHTMLコンテナが含まれます。ヘッドセクションは主に外部CSSファイルをロードするために使用されていますが、本文セクションは手順2で作成された表示されているページコンテンツを格納します。

＆lt; DOCTYPE HTML＆GT;
＆lt; html＆gt;
＆lt;頭＆gt;
＆lt; title＆gt; 3Dテキスト移動＆LT; / title＆gt;

02.目に見えるHTMLコンテンツ

Visible HTMLコンテンツは、表示されているテキストを含む記事コンテナで構成されています。記事コンテナーの重要な部分は 'data-animate'属性です。これは、視覚効果を適用するためにCSSによって参照されます。記事内のテキストは、コンテンツがページのメインのタイトルであることを示すためにH1タグから行われます。

＆lt;記事データ -  animate = "移動中の移動"
  ＆lt; h1＆gt;こんにちは。＆lt; / h1＆gt;
＆lt; / gt;

03. CSSの開始

stylet.css 'という名前の新しいファイルを作成します。最初の命令セットは、ページのHTMLコンテナと本文を黒の背景を持つように設定し、目に見えるボーダー間隔を設定します。継承するページ上のすべての子要素のデフォルトのテキストカラーとしても、Whiteも設定されています。デフォルトのブラックカラーのテキストを避けて、コンテンツを表示しているように見えます。

 HTML、ボディ{
  背景：＃000;
  パディング：0;
  マージン：0;
  カラー：#FFF;

04.アニメーションコンテナ

'data-animate'属性で参照されるコンテンツコンテナには、特定のスタイルが適用されています。そのサイズは、VWおよびVH測定ユニットを使用して画面のフルサイズと一致するように設定されています。また、わずかに回転します。「movein」というアニメーションが適用され、これは20秒間持続し、無限に繰り返されます。

 [DATA-ANIMATE = "移動"] {
  位置：相対;
  幅：100VW;
  高さ：100VH;
  不透明度：1;
  アニメーション：Movein 20s Infinite。
  テキスト整列：中央;
  変換：回転（20deg）;

05.アニメーション開始

前の手順で参照されている「MoveIn」アニメーションには、@KeyFramesを使用して定義が必要です。アニメーションの0％から始まる最初のフレームは、デフォルトのフォントサイズ、テキストの位置付け、表示されている影を設定します。さらに、アイテムは最初に不可能になるように、不透明度がゼロで設定されます。視野外に表示されます。

 @keyframes movein {
  0％{
  フォントサイズ：1em;
  左：0;
  不透明度：0;
  text-shadow：なし
  }
  ***ステップ6ここで

06.ビューにアニメートします

By using multiple shadows you can enhance the 3D effect — 複数の影を使用すると、3D効果を高めることができます

次のフレームはアニメーションを通して10％に配置されます。このフレームは完全に見えるように不透明度を設定し、テキストは徐々にビューにアニメ化されます。さらに、3D深さの錯覚をテキストに与えるために、複数の影が青および減少する色値を添加します。

 10％
{
  不透明度：1;
  テキストの影：
  .2EM-2EM 4PX #AAA、
  .4em -.4em 4px＃777
  .6em -.6em 4px＃444
  .8em -.8EM 4PX＃111;
}
***ステップ7

07.アニメーションの確定

最終フレームは80％であり、アニメーションの最後に発生します。これらはフォントサイズを増やし、要素を左に動かす責任があります。テキストのシャドウがアニメートするために新しい設定も適用され、テキストが80％から100％のフレームからフェージュのフェージングを解除します。

80％{
  フォントサイズ：8em;
  左：-8EM;
  不透明度：1;
}
100％{
  フォントサイズ：10em;
  左：-10EM;
  不透明度：0;
  テキストの影：
  .02EM -.02EM 4PX #AAA、
  .04em -.04em 4px＃777
  .06em -.06em 4px＃444
  .08EM -.08EM 4PX＃111;
}
***

注：あなたが持っているプロジェクト、持っています クラウドストレージ それが不可欠です（私達のガイドは助けになるでしょう）。

この記事はもともとCreative Web Design Magazine Web Designerの第273号に発行されました。 ここで問題273を購入してください または ここでWeb Designerを購読してください 。

関連記事：

輝くネオンテキスト効果を作成します
Webアニメーションをデバッグする方法
Web Animations用のストーリーボードを作成します

アニメーション3Dテキスト効果を作成する

01. HTML文書を開始します

02.目に見えるHTMLコンテンツ

03. CSSの開始

04.アニメーションコンテナ

05.アニメーション開始

06.ビューにアニメートします

07.アニメーションの確定

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

変数フォントを使用するための4ステップ

Houdiniとのワークイメージマスクマジック

あなたのサイトのAlexaスキルを作成する方法

EXPOと原ネイティブのジャンプスタート

インタラクティブPDFSにビデオを追加する方法

Reactで簡単な音楽プレーヤーを構築する

3Dで水彩風景を作成するための11のヒント

PhotoshopでアニメーションGIFを作る

カテゴリ