Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Get canvas mouse move event listener function to work when text is above it, keep text selectable. #76

Open
ChrisCalabrese opened this issue Mar 9, 2022 · 13 comments

Comments

@ChrisCalabrese
Copy link

Hi everyone, I have a canvas that is running the Web GL Fluid particle animation. The problem I'm having is that if the canvas is below a object the mousemove event for the canvas stops firing.
If I use css such as "pointer-events: none;" on the object that's covering the canvas the animation will work but then I can't select text or use buttons in the object. How do I get the canvas to fire its mouseover animation even when objects are covering it all while being able to interact with the those objects. Is there is a way to add to or adjust the canvas mouse event listener so it fires when objects are over it? This is the current code for the canvas mousemove listener:

canvas.addEventListener('mousemove', function (e) { var pointer = pointers[0]; if (!pointer.down) return; var posX = scaleByPixelRatio(e.offsetX); var posY = scaleByPixelRatio(e.offsetY); updatePointerMoveData(pointer, posX, posY); console.log('over the canvas'); });

Here are examples sites that have canvas mouseover interaction below selectable text:
https://advanced.team/
https://www.vantajs.com/

Sample in code pen:
https://codepen.io/chriscalabrese/pen/RwjmNZW

Thanks!

@ChrisCalabrese ChrisCalabrese changed the title Get canvas mouse move event listener function to work when text is above it, must keep text selectable. Get canvas mouse move event listener function to work when text is above it, keep text selectable. Mar 10, 2022
@lillichoung
Copy link

You can alter the script.js to listen to mousemove on the overlay layer instead of the canvas

@mrtsglk
Copy link

mrtsglk commented Mar 11, 2022

I had the same question and someone helped me. You can check out his work.

https://codepen.io/Sempervivum/pen/bGYPXJg

@ChrisCalabrese
Copy link
Author

I had the same question and someone helped me. You can check out his work.

https://codepen.io/Sempervivum/pen/bGYPXJg

Thanks I'll try to leverage this. Very much appreciated.

@ChrisCalabrese
Copy link
Author

ChrisCalabrese commented Mar 12, 2022

Thanks for the replies! I managed to get the particles to animate below the page elements using the JavaScript and min .js file @networkmrt provided. However, I'm not able to get the event listener to work with the original version of the fluid GL JS file. How do I tweak the code so it works with the original script.js file? I can't modify the webgl-fluid.umd.min.js because its minified.

This works:

<script src="https://unpkg.com/[email protected]/dist/webgl-fluid.umd.min.js">
</script>

window['webgl-fluid'].default(document.querySelector('canvas'));
	
document.querySelector('#wrap').addEventListener('mousemove', event => {
    console.log('move');
    newEvent = new event.constructor(event.type, event);
    document.querySelector('canvas').dispatchEvent(newEvent);
});`

This does not work:

<script src="myurl/files/fluid/script.js"></script>

window['script'].default(document.querySelector('canvas'));
	
document.querySelector('#wrap').addEventListener('mousemove', event => {
    console.log('move');
    newEvent = new event.constructor(event.type, event);
    document.querySelector('canvas').dispatchEvent(newEvent);
});

What am I doing wrong? :S

@EscVM
Copy link

EscVM commented Apr 12, 2022

Have you discovered what was your problem?

@MiracleCK
Copy link

MiracleCK commented Apr 12, 2022 via email

@anasnaciri
Copy link

So I spent yesterday playing with the code trying to achieve this, and I think I achieved it :
1st thing : listen to window instead of canvas :
window.addEventListener(mousemove, function)
"2nd thing : change the event property from offsetX and offsetY to clientX and clientY
Next you will have to apply some changes to the function ### updatePointerMoveData :

  • change the canvas.width and height in these two lines :
    pointer.texcoordX = posX / canvas.width;
    pointer.texcoordY = 1.0 - posY / canvas.height;
    it should be something like this :
    pointer.texcoordX = posX / (canvas.width/2);
    pointer.texcoordY = 1 - posY / (canvas.height/2);
    This worked for me because i am setting the canvas size to 100vw and 100vh
    these were all the changes i made and it worked fine for me

@MiracleCK
Copy link

MiracleCK commented May 24, 2022 via email

@gurdeepdesigner
Copy link

gurdeepdesigner commented Jul 31, 2023

This animation not working on mobile, how to solve this issue? any reference please send me urgent

@MiracleCK
Copy link

MiracleCK commented Jul 31, 2023 via email

@gurdeepdesigner
Copy link

This animation not working on mobile, how to solve this issue? any reference please send me urgent. Anyone please help me out

@UDITKIRAR
Copy link

UDITKIRAR commented May 20, 2024

So I spent yesterday playing with the code trying to achieve this, and I think I achieved it : 1st thing : listen to window instead of canvas : window.addEventListener(mousemove, function) "2nd thing : change the event property from offsetX and offsetY to clientX and clientY Next you will have to apply some changes to the function ### updatePointerMoveData :

  • change the canvas.width and height in these two lines :
    pointer.texcoordX = posX / canvas.width;
    pointer.texcoordY = 1.0 - posY / canvas.height;
    it should be something like this :
    pointer.texcoordX = posX / (canvas.width/2);
    pointer.texcoordY = 1 - posY / (canvas.height/2);
    This worked for me because i am setting the canvas size to 100vw and 100vh
    these were all the changes i made and it worked fine for me

@UDITKIRAR
Copy link

UDITKIRAR commented May 20, 2024

thanks bro it really helped

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants