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

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

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

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

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

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

Copy
Full screen
Small screen

<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>

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

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


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

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

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

Была ли статья полезна?
Спасибо!
Что может сделать страницу еще лучше? Сообщение
Жаль, что так произошло
Расскажите, почему статья не была полезна. Сообщение
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.
Оценить страницу
Оценить страницу
Что может сделать страницу еще лучше?

В другой раз

Спасибо за обратную связь!

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

Последнее обновление: 14 февраля 2023

Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.

Сообщите о проблеме
Мы постоянно улучшаем качество нашей документации. Ваш отзыв поможет нам в этом.
Укажите email-адрес, чтобы мы могли связаться с вами
Спасибо за обратную связь!