A fun little color changer for the background. Move your mouse around to change the color. Color based upon the HSL scale.
Try it on bl.ocks.org
A fun little color changer for the background. Move your mouse around to change the color. Color based upon the HSL scale.
Try it on bl.ocks.org
<!DOCTYPE html> | |
<head> | |
<style> | |
.content { | |
display: block; | |
position: fixed; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="content"></div> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script> | |
<script> | |
var width = screen.availWidth, | |
height = screen.availHeight, | |
x = d3.scale.linear() | |
.domain([0,width]) | |
.range([0,360]), | |
y = d3.scale.linear() | |
.domain([0, height]) | |
.range([0,100]); | |
$('.content').on('mousemove', function(e) { | |
clr="hsl("+x(e.offsetX)+","+y(e.offsetY)+"%,50%)"; | |
$(e.target).css('background-color', clr); | |
}); | |
</script> | |
</body> | |
</html> |