-
Notifications
You must be signed in to change notification settings - Fork 0
API reference
[Element] A reference to an existing element within the same document scope to read the location of. A value of null or undefined causes the ProximityEffect instance to track the mouse pointer when calculating distances. If set to any other value the it uses the referenced element's coordinates for its calculations.
[Boolean] A value of true prevents the automatic recalculation of each element's centre point. These are calculated any time the value of offsetX, offsetY or jitter is modified, whenever the affected elements are changed or when the viewport is scrolled or resized. The calculations can be triggered manually by calling setCenterPoints(). The default is false.
Adds a new effect to the effect stack.
myEffect.addEffect(property, values[, params]);addEffect() takes the following arguments:
-
effectName[String] The name of a valid, natively supported effect. If using extended syntax this argument is ignored. -
values[Array] An array of objects mapping distances to effect values. If a number is given for any index, it is converted to an object and automatically distributed. -
params[Object] (Optional) An object containing additional effect parameters, several of which can override global settings for this effect.
Nothing.
ParamsObject = {
attack: [0>1],
decay: [0>1],
threshold: [>=0],
runoff: [>=0],
accuracy : [>=0],
invert: true | false,
offsetX: [<>0],
offsetY: [<>0],
jitter: [>=0],
direction: "horizontal | vertical | both"
}[Number] The attack and decay parameters set the rate of transition change when the distance value is decreasing (attack - target is moving closer) or increasing (decay - target is moving away). It is a number from 0 to 1, where zero indicates no change (effect is frozen) and one indicates the transition is instant. Attack/decay rate is dependent on the refresh rate and is not recommended when using mode mousemove.
[Number] Threshold is the radius from the centrepoint where the distance is treated as zero, like a dead zone.
[Number] Runoff is the distance over which the effect fades from fully near to fully far. Setting runoff to 0 behaves similarly to the :hover pseudo-class.
[Number] The boundary is the sum of threshold and runoff, i.e. the outermost distance where any effect is active.
[Number] A positive integer that affects the accuracy of distance calculations, either for performance or visual reasons. A value of 0 indicates calculations are rounded off, effectively eliminating the tweens entirely. Higher numbers will round the calculations progressively less, smoothing out transitions at the cost of performance. The default is 5 - you are unlikely to see much improvement with anything higher, and may even introduce wobble.
[Boolean] invert swaps the near and far radii of effect as defined by runoff without changing other properties such as attack and decay, or the mapping of values to distances.
[String] If direction is horizontal only the x-axis is used to calculate distances. If direction is vertical only the y-axis is used. A value of both measures the distance in two dimensions.
[Number] The two offset properties shift the centre points of all affected elements from the default calculated point.
[Number] jitter randomises the centre point of each element by the value specified, creating a 'dithered' effect.
The following CSS rules are directly supported:
translateX [unit: px],
translateY [unit: px],
translateZ [unit: px],
rotate [unit: deg],
rotateX [unit: deg],
rotateY [unit: deg],
rotateZ [unit: deg],
scale,
scaleX,
scaleY,
scaleZ,
skewX [unit: deg],
skewY [unit: deg]
blur [unit: px],
brightness [unit: %],
contrast [unit: %],
grayscale [unit: %],
hueRotate [unit: deg],
invert [unit: %],
opacity [unit: %],
saturate [unit: %],
sepia [unit: %],
Any other single, numeric CSS value can be added using the extended syntax.......