Sportlight Effect with CSS3 and Jquery

by Prasad

HTML

<div class="wrapper">
	<div class="coords">
    </div>
    <div class="mouseEffect"></div>
    Spotlight Effect using CSS3 and Jquery
</div>

CSS

.wrapper{width:100%;height:100%;color:#140305;font-size:76px;text-shadow:5px 5px 38px #515151;background-color:#CC2233}.wrapper .coords{position:absolute;width:100px;height:80px;right:0;top:10px;color:#fff;z-index:5000;font-size:12px}.wrapper .mouseEffect{position:absolute;width:100%;height:100%;background-image:-webkit-gradient(radial, 10% 23%, 0, 10% 23%, 100, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.9)), color-stop(0.9, rgba(0,0,0,0)));background-image:-moz-radial-gradient(10% 23% 45deg, circle closest-side, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 100px, rgba(0,0,0,0.9) 120px)}

JavaScript

//**********Global Variable for Width and Height

windowW=windowH=null;
$(document).ready(function(){
	windowW=$(document).width();
	windowH=$(document).height();
	setWrapper();		
	$('.mouseEffect').css({
		'width': 100+'%',
		'height': 100+'%',		
	});	
	$('.wrapper').mousemove(function(e){
		moveSpot(e);		
		$('.coords').text((e.pageX)+" x "+(e.pageY));	//Show current pointer location
	});
})
//****************** Set wrapper on window resize event
$(window).resize(function(){
		setWrapper();		
	});
//****************** Set wrapper 
function setWrapper() {
	$('.wrapper').css({
		'width' : windowW,
		'height' : windowH
	});
}
//******************* Move Sport as Pointer position change
function moveSpot(eve) {	
		$('.mouseEffect').css({
		'width': 100+'%',
		'height': 100+'%',
		'background': '\-moz\-radial\-gradient('+(eve.pageX )+'px '+(eve.pageY )+'px 45deg, circle closest\-side, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0.9)\ 120px)',
		'background-image': '-webkit-gradient(radial, '+(eve.pageX )+' '+(eve.pageY )+', 0, '+(eve.pageX )+' '+(eve.pageY )+', 100,\ from(rgba(0,0,0,0)), to(rgba(0,0,0,0.9)), color-stop(0.9, rgba(0,0,0,0)))',	
		'cursor': 'none'
	});	
}