/home/moonrcjl/template.moontelict.com/freegen/assets/js/mt-cursor.js
(function ($) {
"use strict";
if ($("body").not(".is-mobile").hasClass("mt-magic-cursor")) {
$(".mt-magnetic-item").wrap('<div class="mt-magnetic-wrap"></div>');
if ($("a.mt-magnetic-item").length) {
$("a.mt-magnetic-item").addClass("not-hide-cursor");
}
var $mouse = { x: 0, y: 0 };
var $pos = { x: 0, y: 0 };
var $ratio = 0.15;
var $active = false;
var $ball = $("#ball");
var $ballWidth = 14;
var $ballHeight = 14;
var $ballScale = 1;
var $ballOpacity = 1;
var $ballBorderWidth = 1;
gsap.set($ball, {
xPercent: -50,
yPercent: -50,
width: $ballWidth,
height: $ballHeight,
borderWidth: $ballBorderWidth,
opacity: $ballOpacity
});
document.addEventListener("mousemove", mouseMove);
function mouseMove(e) {
$mouse.x = e.clientX;
$mouse.y = e.clientY;
}
gsap.ticker.add(updatePosition);
function updatePosition() {
if (!$active) {
$pos.x += ($mouse.x - $pos.x) * $ratio;
$pos.y += ($mouse.y - $pos.y) * $ratio;
gsap.set($ball, { x: $pos.x, y: $pos.y });
}
}
$(".mt-magnetic-wrap").on("mousemove", function (e) {
parallaxCursor(e, this, 2);
callParallax(e, this);
});
function callParallax(e, parent) {
parallaxIt(e, parent, parent.querySelector(".mt-magnetic-item"), 25);
}
function parallaxIt(e, parent, target, movement) {
var boundingRect = parent.getBoundingClientRect();
var relX = e.clientX - boundingRect.left;
var relY = e.clientY - boundingRect.top;
gsap.to(target, {
duration: 0.3,
x: ((relX - boundingRect.width / 2) / boundingRect.width) * movement,
y: ((relY - boundingRect.height / 2) / boundingRect.height) * movement,
ease: Power2.easeOut
});
}
function parallaxCursor(e, parent, movement) {
var rect = parent.getBoundingClientRect();
var relX = e.clientX - rect.left;
var relY = e.clientY - rect.top;
$pos.x = rect.left + rect.width / 2 + (relX - rect.width / 2) / movement;
$pos.y = rect.top + rect.height / 2 + (relY - rect.height / 2) / movement;
gsap.to($ball, { duration: 0.3, x: $pos.x, y: $pos.y });
}
$(".mt-magnetic-wrap").on("mouseenter", function () {
gsap.to($ball, { duration: 0.3, scale: 2, borderWidth: 1, opacity: $ballOpacity });
$active = true;
}).on("mouseleave", function () {
gsap.to($ball, { duration: 0.3, scale: $ballScale, borderWidth: $ballBorderWidth, opacity: $ballOpacity });
gsap.to(this.querySelector(".mt-magnetic-item"), { duration: 0.3, x: 0, y: 0, clearProps: "all" });
$active = false;
});
// Cursor hover view from CSS variable
$("[data-cursor]").each(function () {
var $this = $(this);
var color = getComputedStyle(this).getPropertyValue('--cursor-color').trim() || '#fff';
$this.on("mouseenter", function () {
$("#ball").addClass("with-blur");
$ball.append('<div class="ball-view"></div>');
$(".ball-view").append($this.attr("data-cursor"));
gsap.to($ball, {
duration: 0.3,
xPercent: is_rtl() ? 50 : -50,
yPercent: -60,
width: 110,
height: 110,
opacity: 1,
borderWidth: 0,
zIndex: 1,
backdropFilter: "blur(14px)",
backgroundColor: color,
});
gsap.to(".ball-view", { duration: 0.3, scale: 1, autoAlpha: 1 });
}).on("mouseleave", function () {
gsap.to($ball, {
duration: 0.3,
yPercent: -50,
width: $ballWidth,
height: $ballHeight,
opacity: $ballOpacity,
borderWidth: $ballBorderWidth,
backgroundColor: "#000"
});
gsap.to(".ball-view", { duration: 0.3, scale: 0, autoAlpha: 0, clearProps: "all" });
$ball.find(".ball-view").remove();
});
$this.addClass("not-hide-cursor");
});
// Hide cursor on certain elements
$("a, button").not('.cursor-hide').on("mouseenter", function () {
gsap.to($ball, { duration: 0.3, scale: 0, opacity: 0 });
}).on("mouseleave", function () {
gsap.to($ball, { duration: 0.3, scale: $ballScale, opacity: $ballOpacity });
});
$("a").not('[target="_blank"], .cursor-hide, [href^="#"], [href^="mailto"], [href^="tel"], .lg-trigger, .mt-btn-disabled a')
.on('click', function () {
gsap.to($ball, { duration: 0.3, scale: 1.3, autoAlpha: 0 });
});
// Document enter/leave
$(document).on("mouseleave", function () {
gsap.to("#magic-cursor", { duration: 0.3, autoAlpha: 0 });
}).on("mouseenter", function () {
gsap.to("#magic-cursor", { duration: 0.3, autoAlpha: 1 });
}).on("mousemove", function () {
gsap.to("#magic-cursor", { duration: 0.3, autoAlpha: 1 });
});
}
function is_rtl() {
return $('html').attr('dir') == 'rtl';
}
})(jQuery);