Blog

jQueryとCSS3で円の型抜きのホバー効果

2013.09.04Cat:css3 jQuery デザイナー

CSS3のborder-radiusと、jQueryをつかって、

マウスでホバーしたときに円で型抜きをしたような効果ができないかやってみました。

 

↓コチラが実際に作ってみたものです。

DEMO

 

 方法

  1. メインとなる画像の要素を設置し、position:relativeにする。
  2. メインの画像を隠す要素を、メインの画像を隠すように、position:absoluteで設置する。
  3. さらにその上に、型抜きの要素として使うborder-radiusで円型にした要素を、position:absoluteで設置し、背景画像をメインと同じものにする。
  4. jQueryを使い、マウスの座標に合わせて型抜きの要素を移動し、同時に背景画像の位置も移動させる。

ポイントは、型抜きの要素の移動と、背景画像の移動を連動させることで、背景画像が一定の場所で止まっているように見せることです。

これによって、型抜きの要素の背景が、メインの画像と同じ位置に表示され、型抜きになっているように見せることができます。

 

HTML

「<a>」がメインとなる画像を設定する要素、

「<span class=”cover”>」がメインの画像を隠す要素、

「<span class=”hole”>」が型抜の要素です。

 

CSS

「<a>」と「<span class=”hole”>」に同じ背景画像を設定するのがポイントです。

「<span class=”hole”>」は後からちょうどマウスの中心に表示されるようにするために、マイナスマージンで、大きさの半分の値を指定します。

 

JavaScript

jQueryを使って、マウス座標を読み取り、型抜きの要素の位置と、背景画像の位置に反映させます。

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ