<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- If you don't see it u probably are using a browser not based on webkit, so leave IE and grab anything else (Y) -->
<!-- UPDATE: works in Chrome & Safari, not Firefox. To solve that you could use an SVG insted of pure text. -->
<div class="container">
<div class="title">ROBERT DEVELOPER</div>
<div class="subtitle"> geek + smart + curious + nerd + ingenious + cunning = ME </div>
</div>
<script>
$(document).ready(function(){
var mouseX, mouseY;
var ww = $( window ).width();
var wh = $( window ).height();
var traX, traY;
$(document).mousemove(function(e){
mouseX = e.pageX;
mouseY = e.pageY;
traX = ((4 * mouseX) / 570) + 40;
traY = ((4 * mouseY) / 570) + 50;
console.log(traX);
$(".title").css({"background-position": traX + "%" + traY + "%"});
});
});
</script>
