<style>
.magnit__button {
cursor: pointer;
}
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>
<script>
function applyMagneticEffect($elements) {
if ($(window).width() > 980) {
$elements.each(function() {
let $self = $(this);
let hover = false;
let offsetHoverMax = $self.attr("offset-hover-max") || 1;
let offsetHoverMin = $self.attr("offset-hover-min") || 0.75;
let attachEventListeners = function() {
$(window).on("mousemove", function(e) {
let hoverArea = hover ? offsetHoverMax : offsetHoverMin;
let cursor = {
x: e.clientX,
y: e.clientY + $(window).scrollTop()
};
let width = $self.outerWidth();
let height = $self.outerHeight();
let offset = $self.offset();
let elPos = {
x: offset.left + width / 2,
y: offset.top + height / 2
};
let x = cursor.x - elPos.x;
let y = cursor.y - elPos.y;
let dist = Math.sqrt(x * x + y * y);
let mutHover = false;
if (dist < width * hoverArea) {
mutHover = true;
if (!hover) {
hover = true;
}
onHover(x, y);
}
if (!mutHover && hover) {
onLeave();
hover = false;
}
});
};
let onHover = function(x, y) {
TweenMax.to($self, 0.4, {
x: x * 0.8,
y: y * 0.8,
rotation: x * 0.05,
ease: Power2.easeOut
});
};
let onLeave = function() {
TweenMax.to($self, 0.7, {
x: 0,
y: 0,
scale: 1,
rotation: 0,
ease: Elastic.easeOut.config(1.2, 0.4)
});
};
attachEventListeners();
});
}
};
$(document).ready(function() {
applyMagneticEffect($(".magnit__button"));
});
</script>