Pull to refresh

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

Reading time 1 min
Views 26K
В последнем проекте который состоял всего из одной странички, потребовалось реализовать простой эффект, суть которого лучше понять на примере #1 и #2.

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

Настройки



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

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

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

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

UPD: Добавил еще один пример, виноват видимо первый пример не отразил суть того что я хотел сделать.
Tags:
Hubs:
+82
Comments 55
Comments Comments 55

Articles