文字が1行ずつ表示されるアニメーション3例

文字が1行ずつ表示されるアニメーションの事例です。その場でフェードインする演出や、下からスライドして出てくる演出など、ちょっとした違いで見た目の印象も変わりますので、見出しやキャッチコピーなど、目を止めてほしい文字での使用におすすめです。

画面をスクロールすると1行ずつ表示されるアニメーションを確認できます。
※再確認したい場合はページを再読み込みして下さい

その場でフェードインする演出の例

その場で文字がフェードインしながら出てくる演出の例です。オシャレな落ち着いた雰囲気のデザインに合うアニメーションです。複数行に指定するとこんな感じになります。

1行目の文言が入ります

2行目はこちらです

3行目の確認用テキストです

続いて下から文字がスライドして出てくる演出の例です。

下から文字がスライドして出てくる演出の例

下から文字がスライドして出てくる演出の例です。この例ではスライドの速度を早めにしているので、男らしい演出に合うのではないでしょうか。

1行目の文言が入ります

2行目はこちらです

3行目の確認用テキストです

次は応用編として、フェードインしながら右から左に文字が出てくる例です。

フェードインしながら右から左に文字が出てくる演出の例

フェードインしながら右から左に文字が出てくる演出の例です。その場のフェードインと組み合わせて使用するのも効果的です。

1行目の文言が入ります

2行目はこちらです

3行目の確認用テキストです

いかがでしたでしょうか。
細かい演出ですが、ちょっとしたアクセントとしても使いやすい演出であると思います。

このように文字が1行ずつ表示されるアニメーションをご要望でしたら、お気軽にお問い合わせ下さい。

Specializing in coding and
building Wordpress