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

Привет, друзья. Сегодня, по одной из ваших просьб, будем делать интересный эффект, а именно: "параллакс фона, при движении мышкой". Так называемый "hover mouse parallax". Он отлично подойдет для оформления первого экрана на вашем landing page и "оживит" дизайн в целом.

Чтобы приблизительно понять о чем идет речь, можете взглянуть на простенькую страницу одного из моих проектов, а именно лендинг для скрипта FakeOrder. Поводите мышкой. Первый экран как раз иллюстрирует суть того, что сегодня будем делать.

Чтобы продемонстрировать всю мощь того, что умеет скрипт parallax.js зайдите на страницу проекта. Меня очень впечатлило и сразу появилось с десяток идей, как это можно использовать.

Если эффект вам понравился, то давайте начнем.


Подключение скрипта



Подключить скрипт можно двумя способами. Скачать и поместить себе в проект или воспользоваться CDN. Обычно, я использую второй способ. Где-нибудь перед закрывающим тегом "</body>" подключаем parallax.js

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>


На этом пока все, после добавления разметки нужно будет только инициализировать его и задать настройки каждой сцене, которая будет смещаться. Как я уже говорил, делать будем примерно такой же экран, как для страницы "стадного инстинкта". Вот пример разметки:



01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<header class="header">
 
    <div class="header__offer">
      <div class="header__offer-inner">
        <img class="header__offer-logo" src="./img/cow.svg" width="200" alt="Стадный инстинкт">
        <h1 class="header__offer-title">FakeOrder</h1>
        <p class="header__offer-description">Скрипт, имитирующий заказы на сайте</p>
        <div class="header__offer-buttons">
          <a class="header__offer-link" href="#" downloads>Попробовать версию 1.0</a>
          <button class="header__offer-link header__offer-link_button">Версия 2.0 за 100 рублей</button>
        </div>
      </div>
    </div>
 
    <div class="header__bg-title">
      <img src="./img/fake-order-text-xl.png" alt="FakeOrder">
    </div>
     
    <div class="header__bg-particles">
      <img src="./img/particles.png" alt="Фон с частицами">
    </div>
 
</header>
  • "header__bg-title" - это большая фоновая картинка с текстом "FakeOrder".
  • "header__bg-particles" - это полупрозрачная фоновая картинка с частицами.


Остальное, в принципе, понятно. Элементы логотипа, заголовка, подзаголовка и кнопок обернуты в дополнительный "div" чтобы воспользоваться скриптом с параллаксом и все работало корректно. Суть в том, что при инициализации сцены, все дочерние элементы могут стать движущимися, а мне нужно, чтобы весь блок менял положение. Как видите, пока все просто.

Далее при помощи CSS добиваемся приемлемого расположения элементов. У меня это выглядит так:



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



Инициализация сцен и основные настройки



Настало время инициализировать сцены и наконец насладиться проделанной работой. Как ни странно, тут тоже все просто. Каждый элемент, который будет двигаться, нуждается в контейнере или, как его называют сами разработчики: "сцене". У сцены должен быть свой уникальный "id". Предлагаю начать с основного элемента и проделать всю работу на примере с ним. Для меня это фоновый текст с названием скрипта. В разметке имеет класс "header__bg-title".

Для того, чтобы заставить двигаться картинку задаем контейнеру(сцене) "id". Я назову его "header__bg-title-scene".

1
2
3
<div class="header__bg-title" id="header__bg-title-scene">
  <img src="./img/fake-order-text-xl.png" alt="FakeOrder">
</div>

Далее элементу, который будет двигаться нужно задать дата-атрибут "deep" с цифровым значением. От того, насколько большая там цифра будет зависть и расстояние, на которое будет перемещаться объект и скорость этого перемещения.

1
2
3
4
5
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
<script>
  let headerBgTitle = document.getElementById('header__bg-title-scene');
  let headerBgTitleInstance = new Parallax(headerBgTitle);
</script>

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

Теперь проделаю те же операции с остальными элементами. Так выглядит разметка:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<header class="header">
 
    <div class="header__offer" id="header__offer-scene">
      <div class="header__offer-inner" data-depth="0.6">
        <img class="header__offer-logo" src="./img/cow.svg" width="200" alt="Стадный инстинкт">
        <h1 class="header__offer-title">FakeOrder</h1>
        <p class="header__offer-description">Скрипт, имитирующий заказы на сайте</p>
        <div class="header__offer-buttons">
          <a class="header__offer-link" href="#" downloads>Попробовать версию 1.0</a>
          <button class="header__offer-link header__offer-link_button">Версия 2.0 за 100 рублей</button>
        </div>
      </div>
    </div>
 
    <div class="header__bg-title" id="header__bg-title-scene">
      <img data-depth="0.4" src="./img/fake-order-text-xl.png" alt="FakeOrder">
    </div>
     
    <div class="header__bg-particles" id="header__bg-particles-scene">
      <img data-depth="0.6" src="./img/particles.png" alt="Фон с частицами">
    </div>
 
</header>

А так скрипты:

01
02
03
04
05
06
07
08
09
10
11
12
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
<script>
 
    let headerBgTitle = document.getElementById('header__bg-title-scene');
    let headerBgParticles = document.getElementById('header__bg-particles-scene');
    let headerOffer = document.getElementById('header__offer-scene');
 
    let headerBgTitleInstance = new Parallax(headerBgTitle);
    let headerBgParticlesleInstance = new Parallax(headerBgParticles);
    let headerOfferInstance = new Parallax(headerOffer);
 
</script>

Вот, что получилось.

Как видите, все достаточно просто, но конечно же это не все настройки. Например, при помощи дата-атрибута invert-x и invert-y можно инвертировать изменения положения сцены, что выглядит еще эффектнее при наличии большого количества сцен. Пропадает предсказуемость и смотрится это еще круче.

В некоторых случаях полезным может оказать limit-x и limit-y, которые ограничивают перемещение по этим осям. Интересных эффектом можно добиться и при помощи атрибута hover-only, который указывается скрипту, что движение нужно производить только тогда, когда указатель находиться над сценой.

Вообще настроек предостаточно, ознакомьтесь с ними на странице проекта. Их можно задавать не только дата-атрибутами, но и в качестве свойств объекта, который передается при создании нового экземпляра parallax.js. Например, так:

1
2
3
4
5
let headerOffer = document.getElementById('header__offer-scene');
let headerOfferInstance = new Parallax(headerOffer, {
  invertY: false,
  invertX: false
});

Чтобы сделать еще более динамичный экран, можно добавить какую-нибудь зацикленную плавную анимацию элементов, чтобы они меняли положения, поворачивались, пропадали и появлялись и так далее. Так будет намного интереснее и эффектнее.

Еще 1 момент. Если вам, как и мне нужно оставить возможность взаимодействие с элементами внутри с цены, у меня это клик по кнопкам, то сцене нужно передать объект со свойством "pointerEvents" и, в качестве значения, указать "true".

1
2
3
4
let headerOffer = document.getElementById('header__offer-scene');
let headerOfferInstance = new Parallax(headerOffer, {
 pointerEvents: true
});

В таком случае, клик по кнопкам будет доступен.

Почему именно Parallax.js?

Я выбрал именно эту библиотеку потому, что:




  • Это настоящий параллакс с глубиной и слоями.
  • Скрипт реагирует не только на курсор мыши, но и на ориентацию устройства в пространстве, там, где это возможно. То есть при вращении телефона мы также увидим эффект параллакса.
  • Легко подключается и настраивается
  • Работает без jQuery