jQueryとCSS3で円の型抜きのホバー効果
CSS3のborder-radiusと、jQueryをつかって、
マウスでホバーしたときに円で型抜きをしたような効果ができないかやってみました。
↓コチラが実際に作ってみたものです。
方法
- メインとなる画像の要素を設置し、position:relativeにする。
- メインの画像を隠す要素を、メインの画像を隠すように、position:absoluteで設置する。
- さらにその上に、型抜きの要素として使うborder-radiusで円型にした要素を、position:absoluteで設置し、背景画像をメインと同じものにする。
- jQueryを使い、マウスの座標に合わせて型抜きの要素を移動し、同時に背景画像の位置も移動させる。
ポイントは、型抜きの要素の移動と、背景画像の移動を連動させることで、背景画像が一定の場所で止まっているように見せることです。
これによって、型抜きの要素の背景が、メインの画像と同じ位置に表示され、型抜きになっているように見せることができます。
HTML
|
1 2 3 4 5 6 7 | <ul> <li id="home"><a href="#"><span class="cover">HOME</span><span class="hole"></span></a></li> <li id="about"><a href="#"><span class="cover">ABOUT</span><span class="hole"></span></a></li> <li id="menu"><a href="#"><span class="cover">MENU</span><span class="hole"></span></a></li> <li id="staff"><a href="#"><span class="cover">STAFF</span><span class="hole"></span></a></li> <li id="access"><a href="#"><span class="cover">ACCESS</span><span class="hole"></span></a></li> </ul> |
「<a>」がメインとなる画像を設定する要素、
「<span class=”cover”>」がメインの画像を隠す要素、
「<span class=”hole”>」が型抜の要素です。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | ul li a{ display: block; width: 120px; height: 120px; border-radius: 60px; -webkit-border-radius: 60px; background-image: url(images/home.jpg); background-repeat: no-repeat; text-indent: -9999px; overflow: hidden; position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } ul li span.cover{ display: block; width: 120px; height: 120px; background: rgba(255, 255, 255, 0.75); color: #310909; font-size: 24px; line-height: 120px; text-align: center; text-indent: 0; position: absolute; top: 0; left: 0; } ul li span.hole{ display: none; width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; border-radius: 30px; -webkit-border-radius: 30px; background-image: url(images/home.jpg); background-repeat: no-repeat; background-position: -36px -36px; color: #310909; font-size: 24px; line-height: 120px; text-align: center; text-indent: 0; position: absolute; } |
「<a>」と「<span class=”hole”>」に同じ背景画像を設定するのがポイントです。
「<span class=”hole”>」は後からちょうどマウスの中心に表示されるようにするために、マイナスマージンで、大きさの半分の値を指定します。
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | $(function(){ $("ul li a").hover(function(){//メインの要素にマウスがホバーしたら実行 $(this).find(".cover").css("background", "rgba(255, 255, 255, 1)");//隠す要素を不透明にする $("ul li a").mousemove(function(e){//マウスが動くたびに実行 $(this).find(".hole").fadeIn("fast");//型抜きの要素を表示する //型抜きを行う要素の大きさの設定 var holeRadius = 30; //要素の大きさを取得 var boxWidth = $(this).width(); var boxHeight = $(this).height(); //要素上のマウス座標を取得 var mx = e.clientX - $(this).offset().left; var my = e.clientY - $(this).offset().top; $(this).find(".hole").css({ "left" : mx + "px",//マウスの座標に合わせて、型抜きの要素を移動する "top" : my + "px", "background-position" : -1 * (mx - holeRadius) + "px " + -1 * (my - holeRadius) + "px" //マウスの座標に合わせて、型抜きの要素の背景画像をずらす }); }); },function(){ $(this).find(".cover").css("background", "rgba(255, 255, 255, 0.75)");//隠す要素を半透明にする $(this).find(".hole").fadeOut("fast");//型抜きの要素を非表示にする }); }); |
jQueryを使って、マウス座標を読み取り、型抜きの要素の位置と、背景画像の位置に反映させます。
Author Profile
SHARE
