I am attempting to develop a unique interactive experience where an image placed within a container extends beyond its boundaries. The concept involves moving the image in the opposite direction of my mouse as I hover over the container. The speed and intensity of the image movement would depend on the position of the mouse relative to the edges of the container, with faster movements near the edge and no movement at all towards the center.
This idea is inspired by a solution provided on Stack Overflow titled Move the background image on mouse over (Single Parallax). However, unlike the referenced solution, I do not want the motion of my mouse to directly control how the image moves. Instead, I aim for the position of the mouse to dictate the image's movement pattern. For instance, if the mouse is stationary towards the side of the image, the image should continue scrolling until it aligns perfectly within the container.
Although I have come across similar plugins designed for use as sliders which operate solely on the x or y axis, they are not suitable for my requirements. Unfortunately, despite searching extensively for examples, I was unable to locate any relevant resources. If anyone is aware of plugins that could accomplish this task, your assistance would be greatly valued and appreciated!