Plax is a jQuery / Ender plugin that makes it suuuuuper easy to parallax elements in your site based on mouse position. You can see it implemented in many places throughout GitHub, including the 404 page, the 500 page, and the about page. I've also used a modified version to parallax a URL.
In the <head> of your document, link both jQuery and plax.
You can dynamically redefine the range of a layer by running
plaxify() on it again. If the id matches another id in the layer array, it will replace it with the new range.
Add an item to the list of parallaxing layers. Ranges are centered at the items start location. For example, an item with a 20px range will be able to move 10px forward and 10px backward from its start location.
xRange — integer: is the distance across the x-axis the object will travel.
yRange — integer: is the distance across the y-axis the object will travel.
invert — boolean: inverting will invert the direction the object will travel across each axis.*
* The same effect can be achieved by providing
yRange with negative numbers, making it possible to invert only a single axis.
Items should be absolutely positioned, with top: and left: values specified.
If you plan to parallax a background plane, be sure to give it enough extra "bleed" room so the image stays behind it's frame at all times. Usually your bleed on one side should be equal to half the range you give it, though you can give it more if you are paranoid.
For more realistic parallaxing (see "how to do the math" below), pick a "anchor object". Base your ranges for each object on the anchor object's range, getting exponentially larger the farther it is supposed to be from the anchor object. For example, an object close to your anchor object might have 2x its range, while an object really far away may have 5x as big a range.
Objects that appear behind the anchor object should have
invertset to true.
Here are a couple real-life examples of parallaxing and a quick description of how you might emulate it with Plax.
Picture driving down the highway. There are three objects: You, in the inside lane, a truck in the outside lane, and a sign on the side of the road. As you drive past the truck, the sign always manages to stay just out of view behind the it.
invert set to true. Any object behind the "anchor" object should be inverted. Assuming the sign is always about the same distance from the truck as you are (the scenario where you never actually see the sign) then its range should also be around 50–100 pixels.
Picture another scenario driving scenario. You're the passenger in a car driving past a barn. In the distance you can see mountains. If you look at the grass on the side of the road, it seems to be flying by at blazing speed. If you look at the barn, it still appears to be passing by, but much more slowly than the grass. If you look to the mountains in the distance, they pretty much seem to be staying where they are at.
The principals from the previous scenario are still present in this situation, only the anchor has moved to the back layer. Since the mountains are far of in the distance and barely moving, they get a range of 5–10 pixels. Each layer as it comes forward should have a greater range than the layer before it. The barn would probably have 20–30 pixels of range and the grass near the road would probably have 100 pixels of range.
Automatic plaxing: Specify an array of elements and let Plax figure out how to move then around.
Smarter Plaxing: Right now Plax assumes your items are absolutely positioned. In the future I'd like to have Plax convert the current positioning scheme to what it needs, allowing initially relatively positioned elements.
plaxTo() It'd be cool if you could give Plax a percentage to parallax to. This would allow for more than just the mouse as the source of input.