Как стать автором
Обновить

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

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

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

Настройки



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

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

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

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

UPD: Добавил еще один пример, виноват видимо первый пример не отразил суть того что я хотел сделать.
Теги:
Хабы:
Всего голосов 122: ↑102 и ↓20+82
Комментарии55

Публикации

Истории

Работа

Ближайшие события

2 – 18 декабря
Yandex DataLens Festival 2024
МоскваОнлайн
11 – 13 декабря
Международная конференция по AI/ML «AI Journey»
МоскваОнлайн
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань