search

sirxemic / jquery.ripples

Add a water ripple effect to your background using WebGL.
https://sirxemic.github.io/jquery.ripples/
MIT License
1.06k stars 417 forks source link

tilt #41

Closed juliangums closed 7 years ago

juliangums commented 7 years ago

yeah, this is more like a feature request. is there a way to tilt the the entire ripple effect? so let's say i've got this image of a lake jenks_lake now i only want the effect on the water obviously. i can do that if i overlay the same image with the water cut out. then the effect is only visible on the water. but still it will look wrong cause it's not tilted. any easy win on this?

sirxemic commented 7 years ago

This is not what this library is meant for, but perhaps you can experiment with 3D transforms (CSS) to get something close to what you want. Like:

<div ... style="background-image:url(...)">
  <div class="ripples"></div>
</div>

Then apply the effect and a 3D transformation to .ripples - it won't have any distortions, but the highlights of the ripples should still be visible.

juliangums commented 7 years ago

thanks dude! well it partly works to use css perspective rotation. I even managed to translate the correct pointer positions but if i i do it as you said above i won't have the distortions on the image which is really the cool thing about this lib and if I do use a background image it will get tilted as well which is not what i want. i know it's a little off-topic. closing the issue now. but do you know of a way to either "inverse rotate" the image so after rotation it looks straight? otherwise i probably have to edit the shader which is gonna be a little harder i guess...