
In the last project, which consisted of only one page, it was necessary to realize a simple effect, the essence of which is better understood by example
# 1 and
# 2 .
Since there was enough time for implementation, and for a long time there is a desire to write at least something that can help other developers. I designed the whole thing in a very tiny and simple plugin for jquery. I hope that now not only my cat Boris, I can read this code, if this will help someone in their work, I don’t mind using it in your projects, editing copy changes, etc.
Settings
ratioH - modifier of the mouse movement horizontally
ratioV - mouse movement modifier vertically
reversed - swaps X and Y (moving the mouse horizontally changes the position of the object vertically and vice versa)
invertH - invert the movement of the mouse horizontally
invertV - inverting mouse movement vertically
')
Settings are set during script initialization and can be combined in any combination.
If you wish, you can attach .animate () to all of this instead of .css () or even add a transition for normal browsers, but for the task at hand such an implementation was enough. Plans to implement a full-fledged parallax with resizing objects and other goodies.
You can download it
here.Criticism is widely welcomed, recommendations are accepted and taken into account, thank you for your attention.
UPD: Added another
example , apparently the first example is to blame did not reflect the essence of what I wanted to do.