Time for action – adding the mouse events

Now we need to add the mouse events that will trigger the animations:

prox.mouseenter(function(e) {

  message.text(pointerText).delay(1000).fadeOut("slow");

  goAnim(e);

  prox.mousemove(function(ev) {

    goAnim(ev);
  });
});

prox.mouseleave(function() {
  scroller.stop();
  prox.unbind("mousemove");
});

What just happened?

First we set a mouseeenter event handler so that we can detect when the pointer initially enters the proximity container. When this occurs we change the message text so that it shows what to do with the mouse pointer and then fade out the message slowly after a delay of one second.

We then call our goAnim() function to start the animation. At this point, we set a mousemove event so that we can increase or decrease the speed of the animation as the pointer moves within the proximity container. Each time the pointer moves, we call the goAnim() function once more. Each time this function is called we pass in the event object...