div element does not respond to JS onmouseover
So, I have a basic working example where I move the cursor/mouse which generates a div with some styling that represents a wavy pattern based on clientX.
Only works if I add addEventlistener to window: window.onmousemove= e => AnimationBubble(e.clientX);
Don't ask me what this function does, or please check if there is something wrong with it! Let me tell you, there is no problem/bug with this function, it's just a simple function that accepts mouse clientX pos and generates a div with some classes and removes it after a few seconds.
I found that adding event listeners throughout the window was useless, whereas I could save a lot of CPU usage if I added mousemove eventlistener to the parent div. Indicates that the div will only be generated when the user hovers over the parent div/container. I'm thinking of adding this to the footer section to make it more interactive for users.
const wrapper = document.getElementById("bubble_wrapper");
const animationBubble = (x) => {
const bubble = document.createElement("div");
bubble.className = "bubble";
bubble.style.left = `${x}px`;
wrapper.appendChild(bubble);
setTimeout(() => wrapper.removeChild(bubble), 2000)
}
// wrapper.addEventListener('mouseover', (e) => {
// console.log("hi")
// animationBubble(e.clientX);
// });
window.onmousemove = e => animationBubble(e.clientX);
#bubble_wrapper {
height : 50%;
width : 100%;
background-color : black;
position : fixed;
bottom : 0;
overflow : hidden;
pointer-events : none;
}
.bubble {
height : max(300px, 30vw);
width : max(300px, 30vw);
background-color : rgb(33, 150, 243);
border-radius : 100%;
position : absolute;
left : 50%;
top : 100%;
animation : wave 2s ease-in-out infinite;
}
@keyframes wave {
from, to { transform: translate(-50%, 0%); }
50% { transform: translate(-50%, -20%); }
}
<div id="bubble_wrapper"></div>
