mouse-parallax
A simple jQuery plugin for absolute or fixed positioned background layers that respond to mouse movement.
##Usage
Targets an element and sets it to respond to mouse movement in a "parallax" way.
Basically, if the mouse moves left, the background element moves right, etc. to give the sense of "looking." It's a very simple plugin.
###Syntax
$("target-element").mouseParallax({ options });
The following options exist:
- moveFactor : Defaults to 10. The speed of the background in relation to the mouse.
- zIndexValue : Defaults to "-1". How the background should be layered in relation to other elements (z-index.)
- targetContainer : Defaults to 'body'. Which element should be checked for mouse movement, in case you want to contain the effect to only a specific part of a page.
###CSS
You'll need to add the actual background to the targeted element in CSS. eg.
#background { background-image: url('../images/parallax-pattern.png'); background-repeat: repeat; }
The mouseparallax.css file contains a class called ".mouse-bg" which is just to initialize the size and positioning of the elements. By default, positioning is set to "fixed," but in a case where you want to contain the element to the inside of another container, this should be changed to "absolute." And in that case, the container should be set to:
#background-container { position: relative; overflow: hidden; }
"overflow: hidden;" is necessary in this case because otherwise the edges of the background will spill outside.