Now, we need to add the mouse events that will trigger the animations. The following code will be added below these two lines that we previously added:
}, duration, "linear"); }
Below the preceding lines, add the following lines of code:
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"); });
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 fades 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...