Animated Text-Mask Background with jQuery and CSS3

A fancy jQuery & CSS3 solution for textured text that places an image inside of your text as an animated background that reacts to mouse move. Currently works in webkit browsers like Chrome, Safari, Opera, etc, not Firefox. To solve that you could use an SVG instead of pure text.

How to use it:

1. Wrap the text to be filled by image or texture into a DIV element.

<div class="title">jQuery</div>

2. Add a background image to the element and set the background-clip to text.

.title {
  color: transparent;
  background: url("demo.jpg") repeat;
  background-position: 40% 50%;
  -webkit-background-clip: text;
  position: relative;
}

3. Load the needed jQuery library at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

4. Active the animated & interactive background that moves on mouse move.

$(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;
    console.log(mouseX + " e mouseY" + mouseY);
    console.log(ww + " e wh" + wh);
    traX = ((4 * mouseX) / 570) + 40;
    traY = ((4 * mouseY) / 570) + 50;
    console.log(traX);
    $(".title").css({"background-position": traX + "%" + traY + "%"});
  });
});

---

This awesome jQuery plugin is developed by dghez. For more Advanced Usages, please check the demo page or visit the official website.