Text-mask background moving on MouseMove - v2

index.html

<!-- 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">HACKISTIC</div>
  <div class="subtitle"> geek + smart + curious + nerd + ingenious + cunning = ME </div>
</div>

script.js

$(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 + "%"});
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@mixin center(){
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
    left:50%;
    top:50%;
}


@import url(https://fonts.googleapis.com/css?family=Raleway:400,,800,900);
html{
  width:100%;
  height: 100%;
}
body{
  background: -webkit-linear-gradient(rgb(235, 236, 231), rgb(255, 255, 255));
  background: linear-gradient(rgb(235, 236, 231), rgb(255, 255, 255));
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: 'Raleway', sans-serif;
}
.container{
  position:absolute;
  @include center();
}
.title{
  font-weight: 800;
  color: transparent;
  font-size:120px;
  background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat;
  background-position: 40% 50%;
  -webkit-background-clip: text;
  position:relative;
  text-align:center;
  line-height:90px;
  letter-spacing: -8px;
}
.subtitle{
  display: block;
  text-align: center;
  text-transform: uppercase;
  padding-top:10px;
}

text-mask-background-moving-on-mousemove-v2.markdown

Text-mask background moving on MouseMove - v2

Trying the new feature "background-clip: text", with background moving.

A Pen by Dustin on CodePen.

License.