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

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

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

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

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

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

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

文字が踊る

• Ordinary Days

http://ordinary-days.wataamee.com/

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

• SIXPENCE

http://www.sixpence.com.cn/fighter/

カラフルになる

• cheero

http://www.cheero.net/

文字が崩れる

• VolksHOTEL

http://www.volkshotel.nl/

ラインアニメーション

中央からアンダーライン

• Nice and Serious

http://niceandserious.com/

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

• Velvet Hammer

http://velvethammer.net/

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

• Studio Brusco

http://www.studiobrusco.com/

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

• Echo Capital Group

http://www.echocapital.com/

横から打ち消し線

• Risotteria Melotti New York

http://www.risotteriamelottinyc.com/

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

• Grundlos EP

http://www.grundlos-ep.de/

背景アニメーション

背景色がふわっとつく

• masayuki sesoko

http://masayukisesoko.com/

背景が横から伸びる

• WMNVM

http://www.wmnvm.com/

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

• Essential Icons

http://www.essential-icons.com/

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

回転する

• Follow Bubble

http://followbubble.com/

囲まれる

• ALCYACONSEIL

http://www.alcyaconseil.info/

文字間が広がる

• Velvet Hammer

http://velvethammer.net/

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

• paco rabanne

http://www.pacorabanne.com/invictus

まとめ

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