Proximity

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

See the example here on some implementations of this.

Usage

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).

JavaScript

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);

});

HTML

<p>
	<span class="distance">0</span>
	<button class="f-btn f-btn-large example" data-f-proximity>Mouseover me</button>
</p>
<p><img src="https://picsum.photos/1000/400/?image=101" class="f-width-1-1 opacify" alt=""></p>

Example

0 Mouseover me

Opacity

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.

0 Mouseover me too

JavaScript

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)');

});

HTML

<p>
	<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>
</p>

JavaScript options