Как реализовать Параллакс прокрутку

Как это работает

Эффект Parallax позволяет менять положение изображения на сайте относительно других объектов. Благодаря этому эффекту вы можете настроить нестандартную прокрутку страницы с помощью пользовательского HTML-кода и сделать ваш сайт более запоминающимся для пользователей. Вы можете использовать готовое решение или добавить свой код.

Как настроить

Использование готового решения

1. Откройте проект в Личном кабинете.
2. В боковом меню нажмите Site Builder.
3. Нажмите Открыть Site Builder.
4. Вставьте в блок Ваш код следующий код:

<div class="img-holder" data-image="https://cdn.xsolla.net/files/uploaded/2340/4c9ab2e4036d41e2b31c4e6e01a5a7c6.jpeg"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  var script = document.createElement('script');
  script.src = "https://cdn.jsdelivr.net/npm/parallax-imagescroll@0.2.3/jquery.imageScroll.min.js";
  script.addEventListener('load', function() {
    $('.img-holder').imageScroll({
      holderClass: 'sb-image-holder',
      speed: 0.5
    });
  });
  document.getElementsByTagName('body')[0].appendChild(script);
</script>

5. В атрибуте data-image измените ссылку на изображение, для которого будет использован эффект Parallax.
6. Нажмите кнопку Просмотр, чтобы увидеть изменения.

Ознакомьтесь с видеоинструкцией к разделу:

Добавление собственного кода

1. В окне конструктора нажмите Добавить блок и выберите блок Ваш код.

2. Вставьте в блок собственный код.

Полезные ссылки