[JS]ハイライトのエリアをマウスに合わせて移動させるスクリプト

サイト構築 -JavaScript

Post on:2011年1月11日

sponsorsr

Google Chromeのタブのように、繊細なハイライトのエリアをマウスに合わせて移動させるスクリプトを紹介します。

Moving Highlight
デモページ

[ad#ad-2]

元となったGoogle Chromeのタブは、下記のようになります。

タブの実装

まずは、タブの実装から。
タブの実装はシンプルです。

HTML

タブはリスト要素で実装します。

<ul class="nav clearfix">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li class="active"><a href="#">Clients</a></li>
   <li><a href="#">Contact Us</a></li>
</ul>

CSS

CSSもシンプルに実装します。

.nav {
        list-style: none;
        border-bottom: 1px solid #a0a0a0;
        padding: 10px 10px 0 10px;
}
.nav li { display: inline; }
.nav li.active a {
        position: relative;
        z-index: 1;
        bottom: -2px;
        margin-top: -2px;
        background: #eee;
        padding-top: 8px;
        padding-bottom: 8px;
}
.nav li a {
        float: right;
        text-decoration: none;
        position: relative;
        padding: 7px 50px;
        margin: 0 0 0 -8px;
        color: #222;
        background: #d8d7d8;
        -webkit-border-top-right-radius: 20px 40px;
        -webkit-border-top-left-radius: 20px 40px;
        -moz-border-radius-topleft: 20px 40px;
        -moz-border-radius-topright: 20px 40px;
        -webkit-box-shadow: inset 1px 1px 0 white;
        -moz-box-shadow: inset 1px 1px 0 white;
        border: 1px solid #a0a0a0;
}

[ad#ad-2]

ハイライトのエリアをマウスに合わせて移動させる

ハイライトは放射状のグラデーションを使用します。

CSS

background: -webkit-gradient(
  /* radial, <point>, <radius>, <point>, <radius>, <stop>,  [<stop>, ] <stop> */
  radial, 500 25%, 20, 500 25%, 40, from(white), to(#ccc)
);

background: -moz-radial-gradient(
  /* [<position>,] [<shape> || <size>,] <stop> [, <stop>], <stop> */
  500px 25%, circle, white 20px, #ccc 40px
);

放射状のグラデーションのみを実装すると、下記のようになります。

デモページ
マウスを動かすと、グラデーションが移動します。

グラデーションはCSSで実装することが可能ですが、マウスに合わせて移動することができません。そこで、JavaScriptを使用します。
スクリプトで実装するプランは、下記のようになります。

マウスを指定したエリア内で動かした時
マウスの位置を検出し、
その位置にグラデーションを適用する。
マウスが離れた時には、グラデーションを取り除く。

これらはjQueryで簡単に実装できます。

JavaScript

jquery.jsを外部ファイルとし、下記のスクリプトを記述します。

// DOM Ready
$(function() {
	var originalBGplaypen = $("#playpen").css("background-color"),
		x, y, xy, bgWebKit, bgMoz, 
		lightColor = "rgba(255,255,255,0.75)",
		gradientSize = 100;

// Basic Demo
	$('#playpen').mousemove(function(e) {
		x  = e.pageX - this.offsetLeft;
		y  = e.pageY - this.offsetTop;
		xy = x + " " + y;
		bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", " + gradientSize + ", from(" + lightColor + "), to(rgba(255,255,255,0.0))), " + originalBGplaypen;
		bgMoz    = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBGplaypen + " " + gradientSize + "px)";
		$(this)
		.css({ background: bgWebKit })
		.css({ background: bgMoz });
	}).mouseleave(function() {                      
		$(this).css({ background: originalBGplaypen });
	});

	var originalBG = $(".nav a").css("background-color");
	$('.nav li:not(".active") a')
	.mousemove(function(e) {
		x  = e.pageX - this.offsetLeft;
		y  = e.pageY - this.offsetTop;
		xy = x + " " + y;
		bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), " + originalBG;
		bgMoz    = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)";
		$(this)
		.css({ background: bgWebKit })
		.css({ background: bgMoz });
	}).mouseleave(function() {
			$(this).css({ background: originalBG });
	});
});

サイトでは実装にあたって、もう少し詳しく解説がされています。