sandropaganotti-zz/we-love-shadows.html

## we-love-shadows.html
<html>
<head>
<title>We love shadows! A dynamic light source example created with JavaScript and CSS3</title>
<meta name="description" content="An example created by Sandro Paganotti trying to reproduce a light source effect using Javascript and CSS3" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>
<style>
body{
    background: #575757;
}
h1{
    position: absolute;
    padding: 10px;
    font-family: 'Lobster', arial, serif;
    top: 50%;
    left: 50%;
    width: 350px;
    height: 60px;
    margin-left: -150px;
    margin-top: -30px;
    color: #FFF;
    text-align:center;
    font-size: 40px;
}
#credits{
    position: absolute;
    bottom: 0px;
    font-size: 15px;
    font-family: 'Josefin Sans Std Light', verdana, sans-serif;
    color: #ddd;
}
#instructions{
    position: absolute;
    top: 0px;
    right: 10px;
    font-size: 15px;
    font-family: 'Josefin Sans Std Light', verdana, sans-serif;
    color: #ddd;
}
a{
    color: #999;
    text-decoration: none;
}
a:hover{
    color: #333;
    text-shadow: #fff 0px 0px 2px;
}
</style>
<script>
$(document).ready(function() {
    $('body').mousemove(function(event) {
        $('#instructions').hide();

        cx = Math.ceil($('body').width()  / 2);
        cy = Math.ceil($('body').height() / 2);
        dx = event.pageX - cx;
        dy = event.pageY - cy;


        x0 = Math.ceil(cx - (dx * 0.2));
        y0 = Math.ceil(cy - (dy * 0.2));
        x1 = event.pageX;
        y1 = event.pageY;
        r0 = 300;
        r1 = 10;

        sx = -dx * 0.03;
        sy = -dy * 0.03;
        b  =  (Math.abs(sx) + Math.abs(sy)) * 0.2;

        $('body').css('background-image', "-webkit-gradient(radial, " + x0 +" " + y0 +", "+ r0 +", "+ x1 +" "+ y1 +", "+ r1 +", from(#575757), to(#FFFFFF))");
        $('h1').css('text-shadow', "#444 "+ sx +"px "+ sy + "px " + b + "px");
    });
});
</script>
</head>
<body>
    <p id="instructions">Hello web surfer; please move the mouse over the page to begin...</p>
    <h1>We love shadows !</h1>
    <p id="credits"> Presented by <a href="http://www.sandropaganotti.com" target="blank">Sandro ~spx2~ Paganotti</a>; actually tested only on webkit-based browser.
        <a href="mailto:&#115;&#097;&#110;&#100;&#114;&#111;&#046;&#112;&#097;&#103;&#097;&#110;&#111;&#116;&#116;&#105;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;">Contact me</a> for more info.
    </p>
</body>
</html>
	<html>
	<head>
	<title>We love shadows! A dynamic light source example created with JavaScript and CSS3</title>
	<meta name="description" content="An example created by Sandro Paganotti trying to reproduce a light source effect using Javascript and CSS3" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>
	<style>
	body{
	background: #575757;
	}
	h1{
	position: absolute;
	padding: 10px;
	font-family: 'Lobster', arial, serif;
	top: 50%;
	left: 50%;
	width: 350px;
	height: 60px;
	margin-left: -150px;
	margin-top: -30px;
	color: #FFF;
	text-align:center;
	font-size: 40px;
	}
	#credits{
	position: absolute;
	bottom: 0px;
	font-size: 15px;
	font-family: 'Josefin Sans Std Light', verdana, sans-serif;
	color: #ddd;
	}
	#instructions{
	position: absolute;
	top: 0px;
	right: 10px;
	font-size: 15px;
	font-family: 'Josefin Sans Std Light', verdana, sans-serif;
	color: #ddd;
	}
	a{
	color: #999;
	text-decoration: none;
	}
	a:hover{
	color: #333;
	text-shadow: #fff 0px 0px 2px;
	}
	</style>
	<script>
	$(document).ready(function() {
	$('body').mousemove(function(event) {
	$('#instructions').hide();

	cx = Math.ceil($('body').width() / 2);
	cy = Math.ceil($('body').height() / 2);
	dx = event.pageX - cx;
	dy = event.pageY - cy;


	x0 = Math.ceil(cx - (dx * 0.2));
	y0 = Math.ceil(cy - (dy * 0.2));
	x1 = event.pageX;
	y1 = event.pageY;
	r0 = 300;
	r1 = 10;

	sx = -dx * 0.03;
	sy = -dy * 0.03;
	b = (Math.abs(sx) + Math.abs(sy)) * 0.2;

	$('body').css('background-image', "-webkit-gradient(radial, " + x0 +" " + y0 +", "+ r0 +", "+ x1 +" "+ y1 +", "+ r1 +", from(#575757), to(#FFFFFF))");
	$('h1').css('text-shadow', "#444 "+ sx +"px "+ sy + "px " + b + "px");
	});
	});
	</script>
	</head>
	<body>
	<p id="instructions">Hello web surfer; please move the mouse over the page to begin...</p>
	<h1>We love shadows !</h1>
	<p id="credits"> Presented by <a href="http://www.sandropaganotti.com" target="blank">Sandro ~spx2~ Paganotti</a>; actually tested only on webkit-based browser.
	<a href="mailto:sandro.paganotti@gmail.com">Contact me</a> for more info.
	</p>
	</body>
	</html>