小さな工夫が光る、テキストリンクの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

    まとめ

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

    LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

    Webサイト制作の実績・料金を見る

この記事のシェア数

デザイナーをやっております、ぺちこです。イヌとうさぎとぺんぎんが大好きです。「趣味は冬はスノボ、夏はダイビングです!」と言うために2013年からじわじわと奮闘中です。

このメンバーの記事をもっと読む