В последнем проекте который состоял всего из одной странички, потребовалось реализовать простой эффект, суть которого лучше понять на примере #1 и #2.
Поскольку времени для реализации было достаточно, и долгое время таится желание написать хоть что-то, что может помочь другим разработчикам. Оформил все это дело в совсем малюсенький и простой plugin для jquery. Надеюсь, теперь этот код могут прочесть не только я и мой кот Борис, если же это и вовсе кому-то поможет в работе то я совсем не против использования его в ваших проектах, изменения копирования редактирования и т.д.
ratioH — модификатор движения мыши по горизонтали
ratioV — модификатор движения мыши по вертикали
reversed — меняет местами X и Y (движение мыши по горизонтали меняют позицию объекта по вертикали и наоборот )
invertH — инвертирование движения мыши по горизонтали
invertV — инвертирование движения мыши по вертикали
Настройки задаются при инициализации скрипта и могут сочетаться в любой комбинации.
При желании ко всему этому можно прицепить .animate() вместо .css() или даже добавить transition для нормальных браузеров, но для поставленной задачи такой реализации было достаточно. В планах реализовать полноценный parallax с изменением размеров объектов и прочими вкусностями.
Скачать можно тут
Критика широко приветствуется, рекомендации принимаются и учитываются, спасибо за внимание.
UPD: Добавил еще один пример, виноват видимо первый пример не отразил суть того что я хотел сделать.
Поскольку времени для реализации было достаточно, и долгое время таится желание написать хоть что-то, что может помочь другим разработчикам. Оформил все это дело в совсем малюсенький и простой plugin для jquery. Надеюсь, теперь этот код могут прочесть не только я и мой кот Борис, если же это и вовсе кому-то поможет в работе то я совсем не против использования его в ваших проектах, изменения копирования редактирования и т.д.
Настройки
ratioH — модификатор движения мыши по горизонтали
ratioV — модификатор движения мыши по вертикали
reversed — меняет местами X и Y (движение мыши по горизонтали меняют позицию объекта по вертикали и наоборот )
invertH — инвертирование движения мыши по горизонтали
invertV — инвертирование движения мыши по вертикали
Настройки задаются при инициализации скрипта и могут сочетаться в любой комбинации.
При желании ко всему этому можно прицепить .animate() вместо .css() или даже добавить transition для нормальных браузеров, но для поставленной задачи такой реализации было достаточно. В планах реализовать полноценный parallax с изменением размеров объектов и прочими вкусностями.
Скачать можно тут
Критика широко приветствуется, рекомендации принимаются и учитываются, спасибо за внимание.
UPD: Добавил еще один пример, виноват видимо первый пример не отразил суть того что я хотел сделать.