Had a little fun last evening putting together an effect that I recently saw something similar in a video template. Hope you enjoy the weirdness. Let me know if you have any ideas to add to this or how it could apply to a real site.
View Site - image-warp.webflow.io
Designer - https://preview.webflow.com/preview/image-warp?preview=4715d0fbcc0169d672d95a891f6d093e
Clone - https://webflow.com/website/image-warp
Choose an image below to load. Then move your mouse around the viewport to warp or stretch the image. Created using 1 image and 1 iX2 animation.
Oooh my eyes! Good job though.
… looks away to reset eyes!
It would be cool to be able to ping it back - click to release or something like that!
Chewing gum/bubble gum website anyone?
I’ve got some ideas on how to make this even more trippy! ️ ️
Alright everyone. I’ve improved on this effect. Check it out.
Basically what I adjusted was doubling the amount of layers up to 20, added 3d rotation to the mouse movement, and lessened the amount that each layer moved. This created a much smoother effect.
BONUS: Click anywhere in the viewport.
Just don’t click too much My MacBook processor fan went into overdrive! Also, not recommended for vertigo sufferers