Use a callback to do all sorts of things when the mouse gets near!

See the example here on some implementations of this.


Nearby provides a callback giving the distance from an element as the mouse moves towards it. You can then use this to do anything you want.

The below example changes the rgba value of the border of the distance output and fades an image out the closer your mouse gets to the button (starting from 100px away).


FatKit.$('.example').on('progress.f.proximity', (e, intDist) => {

	// intDist is the distance from the element you want
	FatKit.$('.distance').text(intDist).css('border-color', 'rgba(28, 134, 242, ' + intDist + ')')
	FatKit.$('.opacify').css('opacity', 1 - intDist);



	<span class="distance">0</span>
	<button class="f-btn f-btn-large example" data-f-proximity>Mouseover me</button>
<p><img src="" class="f-width-1-1 opacify" alt=""></p>




Here I've negated the return value to fade the image out as you get closer to the button.

Changing the thresholds

Here I'm transforming the output element by between 20px and 50px depending on how close you get to the button. This time it will start when the mouse is within 200px of the button.



FatKit.$('.example2').on('progress.f.proximity', (e, intDist) => {

	// This is the distance from the element you want
	FatKit.$('.distance2').text(intDist).css('transform', 'translate3d(' + intDist + 'px, 0, 0)');



	<span class="f-display-block distance2">0</span>
	<button class="f-btn f-btn-large example2" data-f-proximity="{ distanceThreshold : { min: 0, max: 200 }, intervals: { from: 20, to: 50 } }">Mouseover me too</button>

JavaScript options

Option Possible value Default Description
distanceThreshold object { min: 0, max: 100 } The minimum and maximum distance to trigger a change.
intervals object { from: 0, to: 1 } The threshold of the return value
onProgress function null A callback function if not listening for the trigger