In developing a custom hover cursor for my video div, I am encountering an issue where the cursor does not move with my mouse and remains in place when I scroll. Could someone please review my code and identify what I am doing wrong? Additionally, I have noticed that removing the loading animation from my video tag restores normal functionality. However, if my mouse cursor is inside (#play), it adheres to my mouse and does not disappear until I move my cursor outside of it. Even though I have implemented mouse enter, leave, and move events on my (#video-container). Apologies for any language mistakes in my explanation. Thank you.
function loadingAnim() {
gsap.from("#page1 h1", {
y: 100,
opacity: 0,
delay: 0.5,
duration: 0.9,
stagger: 0.2,
});
gsap.from("#page1 #video-container", {
y: 100,
opacity: 0,
delay: 1.5,
duration: 0.9,
});
}
loadingAnim();
function videoCursor() {
var videocon = document.querySelector("#video-container");
var playbtn = document.querySelector("#play");
videocon.addEventListener("mouseenter", () => {
// playbtn.style.opacity = 1;
// playbtn.style.scale = 1;
gsap.to(playbtn, {
scale: 1,
opacity: 1,
});
});
videocon.addEventListener("mouseleave", () => {
gsap.to(playbtn, {
scale: 0,
opacity: 0,
});
});
videocon.addEventListener("mousemove", (dets) => {
gsap.to(playbtn, {
left: dets.clientX - 60,
top: dets.clientY - 60,
});
});
}
videoCursor();* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Gilroy-Medium", sans-serif;
}
*::selection {
color: #fff;
background-color: #000;
}
html,
body {
height: 100%;
width: 100%;
overflow-x: hidden;
}
#page1 {
position: relative;
min-height: 100vh;
width: 100vw;
padding: 0 1.5vw;
padding-top: 20vh;
}
#page1 h1 {
font-size: 15.9vw;
font-family: futura;
text-transform: uppercase;
line-height: 14vw;
letter-spacing: -0.5vw;
}
#video-container {
height: 100vh;
width: 95vw;
background-color: gray;
margin-top: 2vw;
position: relative;
}
#video-container video {
height: 100%;
width: 100%;
object-fit: cover;
}
#video-container #play {
position: fixed;
padding: 3vw 2vw;
background-color: #000;
color: #fff;
text-transform: uppercase;
font-family: futura;
font-size: 1.5vw;
border-radius: 50%;
opacity: 0;
scale: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div id="page1">
<h1>Change</h1>
<h1>the course</h1>
<div id="video-container">
<div id="play">
PLAY
</div>
<video autoplay muted loop src="./video.mp4"></video>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>