Параллакс эффект при движении мыши

Данный скрипт не требует никакие библиотеки и занимает всего 6 строчек.

Пример:

HTML:

CSS:

JS:

Если на странице присутствует несколько секций с таким параллаксом, то JS будет таким:

И для каждой нужно будет задать отдельный класс или стиль с фоновой картинкой.

По аналогии с этим примером, можно двигать несколько наложенных друг на друга фонов (при условии частичной их прозрачности), задавая им разное смещение, например:

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Елена:

    Всё отлично, всё работает, только не знаю как подключить несколько изображений к этому эффекту… Может подскажете?)

    Ответить
    • Alexander:

      Добавил пару вариантов для разных секций и для нескольких фонов.

      Ответить
  • Катя:

    Как избежать странных подергиваний в Internet Explorer?

    Ответить
    • Alexander:

      Если честно, не знаю и проверить не могу…
      А IE разве еще пользуются?
      Я наверное, лет 10 назад уже забыл как он выглядит 🙂

      Ответить
  • Евгений:

    Шикарно. Все сразу же заработало)) Огромное спасибо автору.

    Ответить
  • Вадим:

    До этого имел в арсенале кусок на jQ в раза 3-4 больше! этот отработал на ура, спасибо!

    Ответить
  • Евгений:

    Просто и гениально, спасибо! 🙂

    Ответить