Skip to content

Instantly share code, notes, and snippets.

@sandropaganotti-zz
Created June 19, 2010 13:30
Show Gist options
  • Save sandropaganotti-zz/444897 to your computer and use it in GitHub Desktop.
Save sandropaganotti-zz/444897 to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment