Edit in JSFiddle

var width = $('#container').width();
var height = $('#container').height();

$('#container').on('mousemove', function(event){
	var x = event.pageX;
  var y = event.pageY;
  var percentX = (((x * 100) / width) - 50) / -4;
  $('.blurrytext').css('text-shadow', percentX +'px 0 10px #666');
});

<div id='container'>
<h1 class='blurrytext'>
Welcome to my site...</h1>
<p class='blurrytext'>I hope you enjoy your stay.</p>
</div>

@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville);
@import url(https://fonts.googleapis.com/css?family=Great+Vibes);
.blurrytext{
  text-align: center;
  text-shadow: -5px 0 10px #666;
}

p{
  color:#222;
  font-family: 'Libre Baskerville', serif;
  font-size:1em;
  margin:0;
}

h1{  
  font-family: 'Great Vibes', serif;
   font-size:4em;
   color:#444;
   margin: 20px auto;
}
#container{
  position:absolute;
  height:100%; width:100%;
  top:0; left:0;
  background: rgb(250,250,255);
}