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

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

Пример:

HTML:

CSS:

JS:

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

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

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

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

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

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

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

  • Олег:

    а как сделать такой эффект в пределах блока, а не когда ты водишь по всему бади и картинка двигается

    Ответить
    • Alexander:
      window.addEventListener('mousemove', function(e) {

      заменить на

      bg.addEventListener('mousemove', function(e) {

      или, если используется вариант для нескольких секций

      bg[i].addEventListener('mousemove', function(e) { 
      Ответить
  • Евгений:

    Эх этот код бы на React'е еще )))

    Ответить
    • Серега:

      Евгений: Если вы не можете написать данный код на react, значит вы не знаете react, возможно слабые знание и в js, очень слабые ибо переписать этот код на react от силы пару минут.

      Ловите ref и вешаете событие, по сути все, остальное проблема верстки.

      Автору спасибо, простой и классный код, прям от души.

      Ответить
  • Миша:

    Огромное спасибо! Очень интересное решение, да ещё и с таким крохотным кодом. :)))

    Ответить
  • Иван:

    Спасибо огромное.
    Встроил данное решение в вордпресс. Работает!
    Появился вопрос: а возможно ли на адаптиве заменить данный параллакс картинкой?
    Использую эффект в шапке страницы. На адаптиве выглядит ... никак не выглядит :о) Подумал, вдруг есть простое решение заменить данный скрипт просто изображением?
    Заранее спасибо.

    Ответить
    • Alexander:

      Поставить проверку на ширину экрана, и если она больше нужной, запускать этот скрипт, например:

      if (screen.width > 768) {
      	// тут код
      }

      Или мобильник определять, например:

      isMobile = navigator.userAgent.match(/(iPhone|iPod|Android|BlackBerry|iPad|IEMobile|Opera Mini)/);	
      if (!isMobile) {
      	// тут код
      }
      Ответить
      • Иван:

        Спасибо огромное.

        Ответить
  • Андрей:

    Отличный параллакс. Спасибо. А подскажите, как сделать чтобы данный скрипт применялся только к одной секции?? В моем случае section id="stages"

    Ответить
    • Alexander:

      Оно и должно применяться к одной секции так то.
      Задайте для ее фона (mouse-parallax-bg) класс, который потом используется в скрипте, и стили все переписать под это.

      Ответить
  • Елена:

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

    Ответить
    • Alexander:

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

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

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

    Ответить
    • Alexander:

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

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

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

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

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

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

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

    Ответить