テキストアニメーションで文章丸ごとフェードインさせるのは簡単ですが、一文字ずつとなるとちょっと方法が変わります。
この記事は当ブログで解説しているGSAPの記事を組み合わせたような内容になっています。
まずGSAPを使ったことがないという人は以下の記事を参照下さい。
-
GSAPとは？基本的な使い方とアニメーションのサンプル付きで解説
続きを見る
また一文字ずつでなければ以下の記事で実装できるので、参照下さい。
-
【GSAP】スクロールでふわっとフェードインさせる方法【アニメーションのサンプルあり】
続きを見る
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
5大無料特典2023年12月31日まで！
GSAPを使いテキストアニメーションで一文字ずつフェードインする方法
今回は多数のサンプルをご紹介するだけなので、コードはサンプルのCodePenの左上にあるHTML・CSS・JSをクリックしてご確認下さい（コピペOKです）
主に以下の2種類の方法をご紹介していきます。
- 最初から画面に表示されていてフェードインする方法
- スクロールして画面内に入ったらフェードインする方法
その前に今回はpタグの文字を一文字ずつspanタグで囲む必要があり、これを手作業でやるのは大変なので、JavaScriptを使って実装します。
JavaScriptでテキストを一文字ずつspanタグで囲む方法については以下の記事を参照下さい。
-
JavaScriptでテキストを一文字ずつspanタグで囲む方法【コピペOK！】
続きを見る
またスクロールして画面内に入ったらアニメーションを開始させる方法は以下の記事を参照下さい。
-
【GSAP】ScrollTriggerの使い方とスクロールアニメーションのサンプルを紹介
続きを見る
ScrollTriggerというプラグインを使わないと実装できないサンプルもあります。
そして連続した同じ要素を時間差でアニメーションさせる方法は以下の記事を参照下さい。
-
【GSAP】Staggerで時間差を作り順番にアニメーションさせる方法
続きを見る
それでは前置きが長くなりましたが続けます。
スクロールしてフェードインする方は、画面中央にあるscroller-startにstartが到達したら発火します。
そしてスクロールしてフェードインする方はリピートしないようにしているので、最初から確認したい場合は右下の『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.
以上になります。
