Text

おしゃれな見出しテキストのjsアニメーション4選

おしゃれなテキストアニメーション

WEBサイトなどで見出しを動かしているものが増えてきたので、今回は見出しやタイトルを簡単にアニメーションできるものを4つご紹介したいと思います。

① 左から右にふわっと表示

左からふわっと表示させることで、高級感やリラックスした雰囲気にできますね。

See the Pen
Untitled
by loa (@hana4525)
on CodePen.

② 左から右にドミノ倒しのように表示

ドミノのように文字が左から倒れるような、少しポップな感じも面白いかも。

See the Pen
Untitled
by loa (@hana4525)
on CodePen.

③ 左から右に1文字ずつ表示

一文字ずつカタカタと表示することで、ユニークでITな感じにも。

See the Pen
Untitled
by loa (@hana4525)
on CodePen.

④ 左から右に滑るように表示

ヌルッと右に滑りこむような、少し目立たせたいときに最適。

See the Pen
Untitled
by loa (@hana4525)
on CodePen.

⑤ まとめ

今回は簡単にできる見出しアニメーションをご紹介しました。

デザインだけでなく、動きをつけるだけでも他のWEBサイトと差別化をはかることができます。

これからいろいろなテキストアニメーションをどんどん紹介していくので、用途やイメージに合わせて取り入れてみてください。

最後までご覧いただきありがとうございました。