<!--TCD053--><style>
.ti-bgtail {
width: 100%;
height: 100%;
background-color: transparent;
position: relative;
overflow: hidden;
}
.tail-image {
width: 300px;
height: 400px;
position: absolute;
pointer-events: none;
z-index: auto;
opacity: 0.9;
transform: scale(0.9);
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
if (window.innerWidth > 960) {
const TiCodeCursor = document.getElementById("TC-Cursor");
const TiCodeBg = document.querySelector(".ti-bgtail");
const TiCodeImageMasive = "";
const TiTailImages = TiCodeImageMasive.split(",");
let TiCodeCursorZone = false;
let lastX = TiCodeBg.clientWidth / 2;
let lastY = TiCodeBg.clientHeight / 2;
const TiTailQueue = [];
let TiCodeTraveled = 0;
const TiCodeMaxImages = 10;
const TiArrow = false;
let TiImageIndex = 0;
TiCodeBg.addEventListener("mouseenter", () => {
TiCodeCursorZone = true;
});
TiCodeBg.addEventListener("mouseleave", () => {
TiCodeCursorZone = false;
});
function getRandomImage() {
const TiCodeRandom = Math.floor(Math.random() * TiTailImages.length);
return TiTailImages[TiCodeRandom];
}
function TcTail(x, y) {
if (TiTailImages.length === 0) return;
if (TiTailQueue.length >= TiCodeMaxImages) {
const TColdestTail = TiTailQueue.shift();
gsap.to(TColdestTail, {
duration: 0.2,
scaleX: 0,
scaleY: 0,
onComplete: () => {
TiCodeBg.removeChild(TColdestTail);
},
});
}
const TiCodesImage = document.createElement("img");
TiCodesImage.src = TiArrow ? getRandomImage() : TiTailImages[TiImageIndex];
TiCodesImage.classList.add("tail-image");
const TCSize = 300;
let tailX = x - TCSize / 2 - TiCodeBg.getBoundingClientRect().left;
let tailY = y - TCSize / 2 - TiCodeBg.getBoundingClientRect().top;
TiCodesImage.style.left = tailX + "px";
TiCodesImage.style.top = tailY + "px";
TiCodeBg.appendChild(TiCodesImage);
const TicursorDirectionX = x - lastX;
const TicursorDirectionY = y - lastY;
gsap.to(TiCodesImage, {
opacity: 1,
duration: 0.7,
x: `+=${TicursorDirectionX * 0.9}`,
y: `+=${TicursorDirectionY * 0.9}`,
ease: [0.42, 0, 0.58, 1],
onComplete: () => {
setTimeout(() => {
gsap.to(TiCodesImage, {
duration: 0.3,
scaleX: 0, scaleY: 0,
ease: "power1.in",
onComplete: () => {
TiCodeBg.removeChild(TiCodesImage);
TiTailQueue.shift();
},
});
}, 700);
},
});
lastX = x;
lastY = y;
if (!TiArrow) {
TiImageIndex = (TiImageIndex + 1) % TiTailImages.length;
}
TiTailQueue.push(TiCodesImage);
}
TiCodeBg.addEventListener("mousemove", (e) => {
const x = e.clientX;
const y = e.clientY;
if (TiCodeCursorZone) {
TiCodeCursor.style.left = x + "px";
TiCodeCursor.style.top = y + "px";
const TiDistance = Math.sqrt(Math.pow(x - lastX, 2) + Math.pow(y - lastY, 2));
TiCodeTraveled += TiDistance;
if (TiCodeTraveled >= 200) {
TcTail(x, y);
TiCodeTraveled = 0;
}
}
});
}
});
</script>