Простой parallax эффект для промо-сайта

в 14:45, , рубрики: javascript, jquery, jquery plugins, parallax, Веб-разработка, метки: , , ,

Простой parallax эффект для промо сайта В последнем проекте который состоял всего из одной странички, потребовалось реализовать простой эффект, суть которого лучше понять на примере.

Поскольку времени для реализации было достаточно, и долгое время таится желание написать хоть что-то, что может помочь другим разработчикам. Оформил все это дело в совсем малюсенький и простой plugin для jquery. Надеюсь, теперь этот код могут прочесть не только я и мой кот Борис, если же это и вовсе кому-то поможет в работе то я совсем не против использования его в ваших проектах, изменения копирования редактирования и т.д.

Настройки

ratioH — модификатор движения мыши по горизонтали
ratioV — модификатор движения мыши по вертикали
reversed — меняет местами X и Y (движение мыши по горизонтали меняют позицию объекта по вертикали и наоборот )
invertH — инвертирование движения мыши по горизонтали
invertV — инвертирование движения мыши по вертикали

Настройки задаются при инициализации скрипта и могут сочетаться в любой комбинации.

При желании ко всему этому можно прицепить .animate() вместо .css() или даже добавить transition для нормальных браузеров, но для поставленной задачи такой реализации было достаточно. В планах реализовать полноценный parallax с изменением размеров объектов и прочими вкусностями.

Скачать можно тут
Критика широко приветствуется, рекомендации принимаются и учитываются, спасибо за внимание.

Автор: ishaba

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js