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">
      FLEKTO WEB<br> 
     DEVELOPMENT
  </div>
  <div class="subtitle"> Programmer + Backend + Techcurious + PHP + Nerd + Software  = 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://wallpapercave.com/wp/wp4471383.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 Nav Appaiya on CodePen.

License.