Skip to content

Instantly share code, notes, and snippets.

@roine

roine/index.html

Created July 6, 2012 05:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save roine/3058275 to your computer and use it in GitHub Desktop.
Save roine/3058275 to your computer and use it in GitHub Desktop.
Download ZIP
shadow and light
Raw
index.html
<link href="http://fonts.googleapis.com/css?family=Squada+One" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
<body>
<span id="pos">
</span>
<span id="text">
The path of the righteous.
</span>
</body>
Raw
script.js
$(document).ready(function(){
halfHeight=$(window).innerHeight()/2;
halfWidth=$(window).width()/2;
var textHeight=$("#text").innerHeight();
$("body").css({"height":$(window).height()});
$("#text").css({"top":halfHeight-textHeight/2});
$(this).mousemove(function(e){
$("#pos").html("X:"+e.pageX+", Y:"+e.pageY);
$("body").css({
"background-image":"-moz-radial-gradient("+e.pageX+"px "+e.pageY+"px 180deg, circle cover, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 20px, #222 200px)",
"background":"-webkit-gradient(radial,"+e.pageX+" "+e.pageY+",0,"+e.pageX+" "+e.pageY+",180,from(rgba(0,0,0,0)),to(#222))"
});
$("#text").css({
"text-shadow":reverse(Math.floor(distX(e.pageX,halfWidth)/25))+"px "+reverse(Math.floor(distY(e.pageY,halfHeight)/25))+"px "+Math.floor(dist(e.pageX, e.pageY, halfWidth,halfHeight)/40)+"px #222"
});
});
});
var dist=function(a,b,c,d){
x=Math.floor(Math.abs(a-c));
y=Math.floor(Math.abs(b-d));
return Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
}
var distX=function(a,c){
return Math.floor(a-c);
}
var distY=function(b,d){
return Math.floor(b-d);
}
var reverse=function(val){
return val+(val*(-2))
}
Raw
style.css
body{
background-image:-moz-radial-gradient(430px 50px 180deg,circle cover,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 20px,#222 200px);
background:-webkit-gradient(radial,430 50,0,430 50,180,from(rgba(0,0,0,0)),to(#222));
background:-o-radial-gradient(430px 50px 180deg,circle cover,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 20px,#222 200px);
background:radial-gradient(430px 50px 180deg,circle cover,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 20px,#222 200px);
background-repeat:no-repeat;
cursor:none
}
#text{
color:#222;
display:block;
font-size:25px;
-moz-transform:scale(2);
-webkit-transform:scale(2);
-o-transform:scale(2);
transform:scale(2);
text-align:center;
position:relative;
font-family:"Squada One",cursive;
width:400px;
margin:0 auto
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment