Applying effect on multiple images about curtainsjs HOT 4 CLOSED

Hi @archimedo,

did you have a look at that pen: https://codepen.io/martinlaxenaire/pen/jeZyZM ?
You just basically need to add one plane per HTML element in your javascript and loop through them to update their mouse position uniforms. That should do the trick!

Cheers,

from curtainsjs.

Thank you so much for your answer and for your example, that was super useful.
Now I'm experimenting a little bit with that, trying to make it fit my image gallery, I was just wondering one thing: in my page, every picture is inside a link tag, I tried quickly to add an between the block in your codepen but it seems that the link is not working (also the cursor doesn't turn in a pointer). Is this related to the js code?
Thank you!

from curtainsjs.

I could fix that issue by setting the opacity to:0 instead of not displaying the image! the links now work just fine!
And I could also apply the effect to my gallery, Thank you again for your example, that helped me a lot!!

I just wanted to ask you if it's possibile to soften the effect a little bit. My gallery has rows with 3 columns so the images aren't really big, so when I hover a picture, the closest ones start to wave as well. I was looking a at the code trying figuring out where the intensity of the wave is defined but I couldn't find.

Can you help which variables should I tweak in order to make the wave effect a bit less intense?

Thank you so much!

from curtainsjs.

Well, there's an uniform called mouseStrength, I thought this would be pretty clear what it was doing :)

Just tweak the last line of code where the mouseStrength uniform is assigned, like that maybe:

// reassign mouse strength (you can try with different distanceFactor values)
const distanceFactor = 0.5; 
plane.uniforms.mouseStrength.value = 1 - Math.sqrt(Math.pow(mouseCoords.x, 2) + Math.pow(mouseCoords.y, 2)) * distanceFactor;

Cheers,

from curtainsjs.