小さな工夫が光る、テキストリンクのHoverアニメーション参考集

ぺちこ


小さな工夫が光る、テキストリンクのHoverアニメーション参考集

こんにちは、デザイナーのぺちこです。

近頃はいろいろな動きを取り入れたサイトが増えていて、「Webって楽しい」というワクワクが今まで以上に感じられます。
私が最近ちょっと気になっているのは、サイト全体の大きな動きではなく、いちパーツである「テキストリンク」のHoverアニメーションです。

大きな部分の動きや同じリンクでも目につきやすいボタンリンクには、いろいろなバリエーションの動きが取り入れられています。一方でテキストリンクについては、ありきたりなエフェクトになってしまっているサイトがまだまだ多いなぁ、と思われます。

そんな中で、そういった些細な部分も手を抜かず作り込まれているサイトを見ると、思わず「おっ!」と立ち止まってしまいます。

サイトコンセプトに沿った効果的なアニメーションを入れることができれば、ワンランク上のWebサイトになっていくはず。
というわけで今回は、テキストリンクのHoverアニメーションのさまざまなパターンを紹介していきたいと思います!

文字で遊ぶアニメーション

文字が踊る

anim7

1文字ずつカウンターのように動く

anim7

カラフルになる

anim7

文字が崩れる

anim7

ラインアニメーション

中央からアンダーライン

anim7

アンダーラインが横に動く

anim7

アンダーラインが下から浮き出る

anim7

アンダーラインが降りてくる

anim7

横から打ち消し線

anim7

アンダーラインからもう1本ラインが浮き上がり、文字を挟む

anim7

背景アニメーション

背景色がふわっとつく

anim7

背景が横から伸びる

anim7

背景がついて、中央から伸びる

anim7

その他いろんなアニメーション

回転する

anim7

囲まれる

anim7

文字間が広がる

anim7

まわりのリンクが薄くなる

anim7

  • paco rabanne
  • http://www.pacorabanne.com/invictus

    まとめ

    いかがでしたでしょうか?
    些細な部分でも少し手をかけるだけで、完成度がグッと高まりますね。
    アニメーションで迷ったときの参考になればと思います。では(^ω^)

ぺちこ
この記事を書いた人
ぺちこ

アートディレクター

関連記事