robin-dela / flowmap-effect

Mouse Flowmap Deformation with OGL

Mouse Flowmap Deformation with OGL

A set of WebGL demos using OGL to create an interactive fluid distortion hover effect.

Article on Codrops

Demo

Credits

• OGL by Nathan Gordon
• Images from Unsplash.com

License

This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.

Misc

Follow Robin: Twitter, Codepen, GitHub

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest, Instagram

© Codrops 2019

flowmap-effect's Issues

Mobile functionality / Enable only while hovering over the specific canvas

Hi!

I really love your plugin, and I'm trying to implement it a a full website with other content as well. Desktop version works just fine, since the user can easily scroll. However, on mobile, the scroll is over-ridden by the javascript, so the user is not able to scroll the website at all.

My question is - what do you think would be the easiest way to fix this? Would it be possible to track the mouse position only inside a certain div?

Filling the images

Swap image for video

I'm trying to swap out the images in this demo for a video, but I'm being left with a small square of a video in the left bottom corner that then just stretches the last pixel to the remaining canvas

Have you been able to use a full screen video for this effect?

Canvas blur issue

I have to use this demo https://tympanus.net/Development/FlowmapDeformation/index3.html on one site but I face some issues on the frontend.

The front end of the demo shows blurs SVG image in the canvas.

See the original SVG image - https://tympanus.net/Development/FlowmapDeformation/img/Alienation.svg

Check the attached screenshot for more information.

Update Mouse Position onscroll

Hey, overall the effects works perfect. But I'd like to update the mouse position when a user scrolls, so the flowmap effect is just in the canvas container. What would I need to do to achieve this?

Thanks in advance!