Bulk modify CSS properties on elements based on mouse pointer or other arbitrary element proximity. Does not override existing style sheets.
NOTE: current version requires capability to extend EventTarget - this knocks out Edge and Firefox before v59 until backwards compatibility is given more thought. To work around import a ponyfill such as
event-target-shim. This lets you be disappointed with how slow Edge is.
npm install --save proximity-effect
Latest ES6+ version is in
src, ES5/minified versions are in
dist. Download your version of choice and embed in your HTML:
Add some content to affect
<body> content add some elements you want to affect:
Remaining set-up should be done after content has loaded. Store a reference to the chosen target:
let elements = document; // requires NodeList
Then define parameters in an object:
let params =attack: 1 // [0<=n>=1] rate of change when approaching, 1=full speed 0=no movementdecay: 1 // [0<=n>=1] rate of change when receding, 1=full speed 0=no movementinvert: false // [Boolean] swap near and far distancesthreshold: 0 // [n>=0] minimum distance (from element's mathematical centre) before effect startsrunoff: 100 // [n>=0] distance over which styles are interpolateddirection: 'both' // 'both' | 'horizontal' | 'vertical'offsetX: 0 // [n>=0] global horizontal centrepoint offsetoffsetY: 0 // [n>=0] global vertical centrepoint offsetmode: 'redraw' // 'redraw' <del>| 'mousemove' | 'enterframe'</del>FPS: 30 // [n>0] 'enterframe' mode only, up to refresh rateaccuracy: 5 // [n>0] rounds internal calculations to reduce CPU load
Then create instance:
let myEffect = elements params;
Parameters can also be accessed as individual properties on the ProximityEffect instance:
myEffectinvert = true;
Finally add effects as you see fit:
ProximityEffect directly supports most permitted functions of the
filter style rules, or additional arguments can be provided to add any single-number CSS rule. (Note: the syntax has changed since v2.1.10).
far can also be fed an object with a
value key and other optional properties, including a
Full details on the API are forthcoming, for now there is only an unfinished page on the wiki.
The API will be fixed from v2.2. The v2.1 devtrain is still likely to see some changes, though on smaller scales.
This software is provided under the Mozilla Public License 2.0. You can freely use the code in your own projects, using any license, without limitation, but if you modify the code base those changes must be pushed back under the same MPL2 license. Any copyright/credits must be left intact.