README.md

Advanced 3d Perspective Distortion

Create a unique parallax environment to show off your work.

I've always been a big fan of using subtitle 3d effects to give depth to UI and images. Ever since laying my eyes on the [26000 Vodka] (http://26000.resn.co.nz/flash.html) website many years ago, I've wanted to create something that can emulate that same kind of depth, without using cumbersome flash to do it. (Also, I didn't know flash, so there's that)

This plugin allows you to (currently) do full-page 3d perspective transforms base on mouse position. There are a lot of options you can tweak to your liking, and I'm looking to develop the application of this effect further.

The structure can include any element, but currently only has support for full screen elements. If you'd like to make non-full screen elements respond to the matrix transform, then simply place the elements inside of a full screen div container. An example of this can be seen in demo4.html

You can customize a number of options and send them in when starting the plugin. See "Options" for more info.

Note: When setting multiple elements to use the effect, each of their containers needs to
have position:relative in their css style. See demo5.html

Options

EffectName: "default" (type)
Description

enable: true (boolean)
Enable/disable the effect

effectWeight: 1 (number)
The weight of how much the background parallaxes based on mouse movement. Lower means a smaller
window of movement, higher means more. Higher values also may introduce clipping depending on the
depth of your scene.

enableSmoothing: true (boolean)
Enables smoothing of the mouse so that the perspective change on mouse movement isnt exactly 1:1

smoothingMultiplier: 1 (number)
A multipler for the time it takes for the parallax effect to center on the mouse cursor. Higher
means more time, lower means the animation is faster.

mouseMode: "container" (string)
Changes how mouse movement triggers the parallax effect. This has 3 settings, "container",
"window", and "magnetic". The default (container) binds it so that the parallaxing only
changes when the mouse is inside of the container, like wise window means that the mouse updates
will be bound to the window. Magnetic, however, allows tracking of the mouse on X and Y planes.
The effect will update when the mouse is on the same x or y plane as the base element.

outerBuffer: 1.10 (number)
A size multiplier for the backgrounds, so that the 3d parallax effect doesn't clip to show a
static background. If you see move your mouse to the corner of the window, and you see a white
background clip on the opposite corner, this value should be higher. That, or your elementDepth
is set too high.

elementDepth: 140 (number)
The difference of depth between each element in px. A higher depth means a better parallax effect,
but also means a higher chance that the further elements will clip. More elements means more
overall scene depth, meaning that if you have more then 4-5 elements in a scene, consider leaving
this setting at its default value, or making it lower.

depthOverride: false (boolean)
If there are a lot of elements in the scene, logosDistort will halve the depth for each element,
to maintain good performance (default setting of false). However, you can turn this off manually if
you don't have any performance concerns by setting this to true;

perspectiveMulti: 1.0 (number)
Changes the perspective of the 3d parent container. This changes the focal point where the scene
will rotate around. A higher multiplier means a smaller rotation, but things will seem far away.
A lower multiplier (below 1.0) means the scene will be closer and will rotate more, which might
expose the background.

directions: [ 1, 1, 1, 1, -1, -1, 1, 1 ] (array of numbers)
Weights for the directions of the parallax effect based on mouse movement. Default is set so that
the "center" of the effect moves opposite to the mouse in all directions. Changes in this can break
the effect. See the Demo3 for an example on how to set these directions

weights: [ 0.0000310, 0.0001800, 0.0000164, 0.0000019, 0.0001200 ] (array of numbers)
Effect weights for how much the effect will move in a given direction based on mouse movement.
Here is each number and what they do (about).

container: window (variable)
The container for which the effect will be bound. This can either be an element, or set to 'self',
where the base element will be used as the container. See demo5.html for an example.

cssClasses:(object)
Overrides for the class names incase you want to use a similar class name for a specific element.