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

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

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

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

1. В проекте в Личном кабинете перейдите в раздел Каналы продаж > Веб-сайты.
2. В разделе Сайты выберите ваш сайт и нажмите Открыть Site Builder.
3. Если ваш сайт содержит несколько страниц, выберите нужную страницу:
   1. Нажмите на название текущей страницы в верхней части конструктора.
   2. Выберите страницу из раскрывающегося списка.
4. В любой части страницы нажмите Добавить блок.
5. Выберите блок Ваш код.
6. Добавьте HTML-код со скриптом, реализующим эффект, одним из 2 способов:
   • Используйте собственный код.
   • Используйте готовый скрипт. Для этого:
     1. Вставьте в блок следующий код:

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

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

7. Нажмите кнопку Просмотр, чтобы увидеть изменения.

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

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