こんにちは。
JOYCONNECTのデザイン担当、デザインマスターです。

今回は現場でスグに使えるホバーエフェクトのサンプルコードをご紹介します。

さまざまなホバーエフェクトを学ぶ

今回は様々なホバーエフェクトをご紹介します。

現場でスグに使えるサンプルコード付きなので、
ぜひ試してみてください。

ボタンの3種類ホバーエフェクト

ホバーエフェクト

まずは3種類のホバーエフェクトをご紹介します。

HTMLとCSS、JSのコードを以下におまとめします。

今回は一行ずつ異なるホバーエフェクトを実装しております。

>>デモをチェックする

1行目のボタンエフェクトですが、
マウスオーバーすると、ボタンの背景が徐々に変化するエフェクトです。

JavaScriptですが、
最初に変数durationを宣言し、300という値を格納しています。

この値は、この後に出てくるanimate()メソッドの2つ目の引数として使用しています。

今回の処理の対象は、
#buttons1 button:nth-child(-n+4)です。(#buttons1の要素内の1〜4番目の要素)

$()関数にこの要素を指定した上で、
on()メソッドを使用してマウスオーバー時とマウスアウト時の処理を記述しています。

2行目のボタンには、
マウスオーバーすると、そのボタンの外枠から徐々に色面が表示されるエフェクトをかけます。

JavaScritでは、
animate()メソッドを使用してマウスオーバーするとborderWidthを12pxにし、
マウスアウトするとborderWidthを0pxにするようにしています。

なおborderの色は、
CSSで指定します。

3行目のボタンには、
マウスオーバーすると色面が左側からスライドインして、
背景色と文字色の異なるボタンに変化するようにしています。

上記のエフェクトを実現するために、
HTMLではspan要素を追加し、ボタンを2重に重ねています。

そして重ねたうちのspan要素内のボタンに対して処理を行なっていきます。

また、CSSでは重ねたボタンに異なる色を指定し、
overflow:hidden;を指定しています。

JavaScriptでは、
このoverflow:hidden;が指定された要素の幅をアニメーションさせることで、
今回制作する効果を実現します。

上記ではfind()メソッドを使用しています。

find()メソッドは「jQueryオブジェクトに含まれる各要素の子孫要素の中から、セレクタを使用してさらに要素を絞り込むメソッド」です。

今回はfind()メソッドの引数にspan要素を指定することで、
対象処理を「重ねた方のボタン(span要素内のボタン)」に限定しています。

画像とキャプションの表現

ホバーエフェクト

次にHTML上に配置された画像にマウスオーバーした際にキャプションを追加する方法をご紹介します。

キャプションの動きは全部で3種類制作します。

今回使用するHTMLを以下に記述します。

各キャプション(strong要素)の後に空のspan要素が記述されていますが、
この要素には後でJavaScriptからCSSを操作することで、
この要素にマウスオーバーした際に半透明の背景色と内側の影を加えます。

CSSでは、初期状態としてキャプションの背景と
マウスオーバー時にspan要素に指定する半透明の背景色と内側の影を指定しています。

また、span要素に関してはここでは透明にしています。(opacity:0;)

1つめの画像のキャプションは、
画像上にマウスオーバーすると、徐々にキャプションが表示され、
画像の外周に影がつきます。

まずは1つめの画像向けのCSSを用意します。

ここでは、strong要素(画像のキャプション)を透明にしています。

次にJavaScriptの紹介です。

変数$imagesには今回の処理対象である画像のjQueryオブジェクト(#images p)を格納しています。

各画像に対する処理では、
最初にfilter()メソッドを使用して対象処理の画像を絞り込んでいます。

1つめの画像では、
マウスオーバー時は徐々に不透明度(opacityが1)になり、
マウスアウト時に徐々に不透明度(opacityが0)になります。

2つめの画像では、
キャプションが横からスライドインしてくるような表現を実装しています。

まずは2つめの画像向けのCSSとして、
以下を用意します。

ここでは、strong要素(画像のキャプション)を透明にし、
画像上から左側に少しずらして配置しています。

スクリプトを以下におまとめします。

strong要素はCSSでleft:-200%;に指定してあるので、
ここでleft:’0%’に向かってアニメーションさせることで表示領域に移動しています。

マウスアウト時はleft:’-200%’に向かってアニメーションさせることで、
非表示にしています。

最後に3つめの画像ですが、
ここではキャプションを画像下部からスライドインさせるとともに、
画像自体も少し上方向にスライドさせます。

まずは3つめの画像向けのCSSとして、
以下を用意します。

ここではstrong要素(画像のキャプション)の下部に不透明の色面を敷き、
画像下部に配置しています。

JavaScriptでは、
CSSに指定されているbottom:-80px;を、
bottom:0px;へと変化させることで、
画像下部から表示されるキャプションを表現します。

またimg要素を絶対配置でtop:0px;に配置しています。

スクリプトを以下におまとめします。

>>画像1〜3のデモをチェックする