Конструктор сайтов / Как реализовать прокрутку страницы с помощью эффекта Parallax
 На главную

Конструктор сайтов

  • Руководство по интеграции

  • Инструкции

  • Расширения

  • Справочники

  • Как реализовать прокрутку страницы с помощью эффекта Parallax

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

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

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

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

    1. Перейдите в Личный кабинет > Конструктор сайтов.
    2. Вставьте в блок Ваш код следующий код:

    Copy
    Full screen
    Small screen
    <div class="img-holder" data-image="https://cdn.xsolla.net/files/uploaded/2340/4c9ab2e4036d41e2b31c4e6e01a5a7c6.jpeg"></div>
    
    <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. Вставьте в блок собственный код.

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

    В другой раз

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

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

    Последнее обновление: 20 июля 2021

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

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