JavaScriptとCSS3で実現するスポットライトのような演出[CSS]

svay.comより、JavaScriptとCSS3で実現するスポットライトのような効果を演出する方法の紹介です。

デモページはコチラから

スポットライトのように描かれた円が、マウスを動かすと、マウスの動きに合わせて動きます。

CSS3 Spotlightというタイトルなので「これをCSS3だけでやっていたらすげーなー!」って思いましたが、マウスイベントということでJavaScriptを使ってます。

JavaScript

var spot = document.getElementById('spot');
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;

function moveSpot(e){
    var x = 0;
    var y = 0;

    if (!e) var e = window.event;
    if (e.pageX || e.pageY)
    {
        x = e.pageX;
        y = e.pageY;
    }
    else if (e.clientX || e.clientY)
    {
        x = e.clientX + document.body.scrollLeft;
        y = e.clientY + document.body.scrollTop;
    }
    
    if (navigator.userAgent.match('AppleWebKit')) {
        var style = '-webkit-gradient(radial, '+x+' '+y+', 0, '+x+' '+y+', 100, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.8)), color-stop(0.8, rgba(0,0,0,0)))';
    } else {
        var style = '-moz-radial-gradient('+x+'px '+y+'px 45deg,circle closest-side,transparent 0,transparent 100px,rgba(0, 0, 0, 0.8) 120px)';
    }
    spot.style.backgroundImage = style;
}

window.onload = function() {
    window.onmousemove = moveSpot;
}

デモページでは、デザインもあるので、@font-faceを用いていますが、使っているCSS3のプロパティは、transform、pointer-events、gradientです。下記ソースがCSS3を用いている部分です。

CSS3

div{
	margin-top:6em;
	font-family:"LeagueGothicRegular";
	color:#FFF;
	-webkit-transform:rotate(-10deg);
	-moz-transform:rotate(-10deg);
	text-align:center;
}
.spotlight{
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:1pxsolid#000;
	
	pointer-events:none;
	background-image:-webkit-gradient(radial,50%50%,0,50%50%,100,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.8)),color-stop(0.8,rgba(0,0,0,0)));
	background-image:-moz-radial-gradient(50%50%45deg,circleclosest-side,transparent0,transparent100px,rgba(0,0,0,0.8)120px);
}