GSAP Web制作 JavaScript

【GSAP】テキストアニメーションで一文字ずつフェードインさせる方法【14種類のサンプル付き】

※ 当サイトではアフィリエイト広告を利用しています

GSAPを使って一文字ずつふわっとフェードインさせることは出来る?

テキストアニメーションで文章丸ごとフェードインさせるのは簡単ですが、一文字ずつとなるとちょっと方法が変わります。

この記事は当ブログで解説しているGSAPの記事を組み合わせたような内容になっています。

まずGSAPを使ったことがないという人は以下の記事を参照下さい。

あわせて読みたい
GSAPとは?基本的な使い方とアニメーションのサンプル付きで解説
GSAPとは?基本的な使い方とアニメーションのサンプル付きで解説

続きを見る

また一文字ずつでなければ以下の記事で実装できるので、参照下さい。

あわせて読みたい
【GSAP】スクロールでふわっとフェードインさせる方法【アニメーションのサンプルあり】
【GSAP】スクロールでふわっとフェードインさせる方法【アニメーションのサンプルあり】

続きを見る

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

5大無料特典2023年12月31日まで!

販売ページとレビューを見てみる

GSAPを使いテキストアニメーションで一文字ずつフェードインする方法

今回は多数のサンプルをご紹介するだけなので、コードはサンプルのCodePenの左上にあるHTML・CSS・JSをクリックしてご確認下さい(コピペOKです)

主に以下の2種類の方法をご紹介していきます。

  • 最初から画面に表示されていてフェードインする方法
  • スクロールして画面内に入ったらフェードインする方法

その前に今回はpタグの文字を一文字ずつspanタグで囲む必要があり、これを手作業でやるのは大変なので、JavaScriptを使って実装します。

JavaScriptでテキストを一文字ずつspanタグで囲む方法については以下の記事を参照下さい。

あわせて読みたい
JavaScriptでテキストを一文字ずつspanタグで囲む方法【コピペOK!】
JavaScriptでテキストを一文字ずつspanタグで囲む方法【コピペOK!】

続きを見る

またスクロールして画面内に入ったらアニメーションを開始させる方法は以下の記事を参照下さい。

あわせて読みたい
【GSAP】ScrollTriggerの使い方とスクロールアニメーションのサンプルを紹介
【GSAP】ScrollTriggerの使い方とスクロールアニメーションのサンプルを紹介

続きを見る

ScrollTriggerというプラグインを使わないと実装できないサンプルもあります。

そして連続した同じ要素を時間差でアニメーションさせる方法は以下の記事を参照下さい。

あわせて読みたい
【GSAP】Staggerで時間差を作り順番にアニメーションさせる方法
【GSAP】Staggerで時間差を作り順番にアニメーションさせる方法

続きを見る

それでは前置きが長くなりましたが続けます。

スクロールしてフェードインする方は、画面中央にあるscroller-startstartが到達したら発火します。

そしてスクロールしてフェードインする方はリピートしないようにしているので、最初から確認したい場合は右下の『Rerun』をクリックして下さい。

 

下からフェードイン

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

 

スクロールして画面内に入ったら下からフェードイン

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

 

拡大しながらフェードイン

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

 

スクロールして画面内に入ったら拡大しながらフェードイン

See the Pen
GSAP(テキストアニメーション④)
by junpei (@junpei-sugiyama)
on CodePen.

 

上から落ちてバウンドするようにフェードイン

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

 

スクロールして画面内に入ったら上から落ちてバウンドするようにフェードイン

See the Pen
GSAP(テキストアニメーション⑥)
by junpei (@junpei-sugiyama)
on CodePen.

 

一回転しながらフェードイン

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

 

スクロールして画面内に入ったら一回転しながらフェードイン

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

 

ランダムにフェードイン

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

 

スクロールして画面内に入ったらランダムにフェードイン

See the Pen
GSAP(テキストアニメーション⑩)
by junpei (@junpei-sugiyama)
on CodePen.

 

ランダムに上から落ちてバウンドするようにフェードイン

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

 

スクロールして画面内に入ったらランダムに上から落ちてバウンドするようにフェードイン

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

 

放射線状にフェードイン

See the Pen
GSAP(テキストアニメーション13)
by junpei (@junpei-sugiyama)
on CodePen.

 

スクロールして画面内に入ったら放射線状にフェードイン

See the Pen
GSAP(テキストアニメーション14)
by junpei (@junpei-sugiyama)
on CodePen.

まとめ

今回はGSAPを使った14種類のテキストアニメーションをご紹介しました。

他にもイージングを含めいろんな組み合わせがあると思うので、ぜひ試してみて下さい。

最後に今回の内容とは関係ありませんが、雨粒風のアニメーションを載せておきます。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

以上になります。

 

Web制作におすすめの教材と案件獲得サービス!
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-GSAP, Web制作, JavaScript