Skip to content

Instantly share code, notes, and snippets.

@griffiths

griffiths/gradientbg.html

Created July 13, 2012 04:50
Show Gist options
  • Save griffiths/3102784 to your computer and use it in GitHub Desktop.
Save griffiths/3102784 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gradientbg.html
<!DOCTYPE html>
<html>
<head>
<style>
p { margin:0; margin-left:10px; color:red; width:220px;
height:120px; padding-top:70px;
float:left; font-size:14px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p id="info">
</p>
<script>
$("html").mousemove(function(e){
if ((e.clientY - 60) < 0) {
var currPos = 0;
}
else {
if (e.clientY > ($(document).height()-61)) {
var currPos = $(document).height()-121;
} else {
var currPos = e.clientY - 60;
}
}
// $("#info").text(currPos + "/" + ($(document).height()-121) + " -- " + currPos / ($(document).height()-121));
var bgOpac = "rgba(0, 0, 0, " + (currPos / ($(document).height()-121)) + ")";
$('body').css( "background-color",bgOpac );
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment