CSS
html {
width: 100%;
height: 100%;
}
body {
background: #8e9eab;
background: -webkit-linear-gradient(to left, #8e9eab , #eef2f3);
background: linear-gradient(to left, #8e9eab , #eef2f3);
margin: 0;
width: 100%;
height: 100%;
font-family: 'Raleway', sans-serif;
}
.container {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
max-wisth: 100%;
}
.title {
color: #333;
letter-spacing: -5px;
margin-left: -16px;
font-weight: 800;
color: transparent;
font-size: 100px;
background: url("https://download.unsplash.com/uploads/14116941824817ba1f28e/78c8dff1") repeat;
background-position: 30% 10%;
background-size: 200%;
-webkit-background-clip: text;
position: relative;
text-align: center;
line-height: 90px;
text-transform: uppercase;
letter-spacing: 10px;
}
JAVASCRIPT
$(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) / 350) + 10;
traY = ((4 * mouseY) / 350) + 20;
$(".title").css({"background-position": traX + "%" + traY + "%"});
});
});
