PAGETOP

アンカーテキストに色々なエフェクトをかける方法。

【CSS】楽しすぎるアンカーテキストのホバー効果「Inspiration for Inline Anchor Styles」

ホバー効果は画像やボックスだけではありません。CSS3を使えば、アンカーテキストにも、遊び心たっぷりのホバー効果が付けられます。
今回は、思わず何度もマウスオーバーしたくなるホバー効果「Inspiration for Inline Anchor Styles」をご紹介します。もう色を変えたり下線を出すだけでは物足りなくなるかもしれません。

Inspiration for Inline Anchor Styles

http://tympanus.net/Development/InlineAnchorStyles

17種類のデモが用意されていますが、その中でも特にクールなエフェクトのデモをまとめましたので、ご紹介します。
※cssは、ホバー効果に関わる部分のみを抜粋しています。

背景色がズームインする「link-scaleup」効果

時間変化を指定するtransitionと変形を適用させるtransformの合わせ技で、背景色がズームインで現れます。


背景色がパタッと立ち上がる「link-flip」効果

基本は、要素を回転させるtransform:rotateX。
これに、タイミング(transition-timing-function)や奥行き感(perspective)を組み合わせて、後ろ側から立ち上がるような立体的な動きを表現しています。

【デモ】


文字がキュッと枠内に納まる「link-border」

transformで文字を小さくすると同時に、ボーダーを拡大しながら出現させます。仕組みとしては割とシンプルですが、気持ちのいいエフェクトです。

【デモ】


4.歪んだ背景が現れる「link-skewed」

transform: skewY(0) skewX(0)で歪みを表現。より立体的で、動きが強調されています。

【デモ】


5.テキスト上を走るような「link-textupline」

translateで背景色の表示位置を移動させているのですが、テキストの上をさっと色が走り抜けるようなエフェクトを実現しています。

【デモ】


6.ポップアップでリンク先が表示される「link-tipoverlay」

content: attr(href)でリンク先URLを取得・表示しています。非常に分かりやすい上、クリックで飛ぶ前にURLを見せてくれるので安心感があります。

【デモ】


7.スライドして矢印が現れる

最初に、before疑似要素の背景色の下に、after疑似要素の矢印背景を隠しておきます。マウスオーバーするとbefore疑似要素の背景色が移動することで、下にあったafterの矢印背景が顔を出す、というテクニック。アイデアがスゴいです。

【デモ】


8.角カッコでまとめる「link-braces」

translateX(100%)でカッコを移動させ、テキストがカッコ内にまとめられているようなイメージを表現。最初に、beforeとafterにそれぞれ、content: ‘]’でカッコを追加しておき、opacityで見えなくしています。

【デモ】


9.テキストが落ちて重なる「link-textfall」

HTML側のdata-dummy属性で指定したテキストを、beforeとafter疑似要素に挿入。それぞれ別の角度から時間差で回転移動させています。

【デモ】


10.マーカーでアンダーラインを引いたような「link-svgline」

手描きっぽいラインがかわいいエフェクト。見た目はシンプルですが、これまでの中では一番目を引きそうです。SVGをcssでアニメーションさせ、線を描画しています。

【デモ】


全サンプルのダウンロードはこちらから。

http://tympanus.net/codrops/2014/06/04/inspiration-for-inline-anchor-styles/