おしゃれな見出しテキストのjsアニメーション4選
テキストアニメーション使えていますか？
ボタンにアニメーションをつけているサイトは多いですが、テキストにもアニメーションを使っていますか？
今回は見出しやタイトルを簡単にアニメーションできるものを4つご紹介したいと思います。
WEBサイトなどで見出しを動かしているものが増えてきましたが、まだまだ少ない印象ですよね。
特にプロモーションや広告のようなサイトを作るときには、コンバージョンが格段に高くなるのでぜひ使ってみてほしいです！
本記事では、おしゃれでシンプルなテキストアニメーションを紹介していきますので取り入れやすいと思います。
それでは一緒に見ていきましょう♪
よく読まれている記事
左から右にふわっと表示
文字が左から右につれてふわっと表示させるアニメーションです。
高級感やリラックスした雰囲気になりますね。
シンプルでデザインを邪魔しない動きなので、迷ったらとりあえずこれを使っておきましょう。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
左から右にドミノ倒しのように表示
ドミノたおしのように文字が左から右に倒れながら表示されるアニメーションです。
少しポップな感じでユーモアがあって面白いですね。
海外のサイトでたまに見られるようなものです。
日本ではあまり見かけない動きなので、他と差別化したいときにはおすすめです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
左から右に1文字ずつ表示
タイプライターのように1文字ずつカタカタと表示されるアニメーションです。
IT企業などのメインビジュアルでたまに見かけるような動きですね。
検索しているイメージを作りたいときや、パソコン業務を連想させたいときにイイかも。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
左から右に滑るように表示
文字が右側からヌルッと左に滑りこむように表示されるアニメーションです。
1文字ずつ表示させる命令と、左にスライドインさせる命令を掛け合わせているので少し複雑な実装です。
これはほとんど見かけたことがないので、このアニメーションを提案したら喜ばれること間違いなしですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
まとめ
今回は簡単にできる見出しアニメーションを4つご紹介しました。
よく見かけるものから、あまり見ないものまであったかと思います。
デザインだけでなく、動きをつけるだけでも他のWEBサイトと差別化をはかることができます。
これからいろいろなテキストアニメーションをどんどん紹介していくので、用途やイメージに合わせて取り入れてみてください。
今回は黒色のゴシックフォントで作成していますが、フォントの色を変えたり明朝体にするだけでまったく別の印象を与えることもできます。
提案したいサイトに合わせて、コードを自由に書き換えてみてください。
新しいテキストアニメーションの魅力を一緒に発見していきましょう♪
最後までご覧いただきありがとうございました☆彡