Как реализовать Параллакс прокрутку
Как это работает
Эффект Parallax позволяет менять положение изображения на сайте относительно других объектов. Благодаря этому эффекту вы можете настроить нестандартную прокрутку страницы с помощью пользовательского HTML-кода и сделать ваш сайт более запоминающимся для пользователей. Вы можете использовать готовое решение или добавить свой код.
Как настроить
Использование готового решения
- Откройте проект в Личном кабинете.
- В боковом меню нажмите Site Builder.
- Нажмите Открыть Site Builder.
- Вставьте в блок Ваш код следующий код:
Copy
- html
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>
- В атрибуте
data-image
измените ссылку на изображение, для которого будет использован эффект Parallax. - Нажмите кнопку Просмотр, чтобы увидеть изменения.
Ознакомьтесь с видеоинструкцией к разделу:
Добавление собственного кода
- В окне конструктора нажмите Добавить блок и выберите блок Ваш код.
- Вставьте в блок собственный код.
Была ли статья полезна?
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.Полезные ссылки
Последнее обновление: 9 июля 2025Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.