How to implement parallax scroll

How it works

The Parallax effect enables changing the position of an image in relation to other objects. You can set up unconventional scrolling of your page via a custom HTML code and make your site more eye-catching. You may use an existing solution or add your own code.

How to get it

Using an existing solution

1. Open your project in Publisher Account.
2. In the side bar click Site Builder.
3. Click Open Site Builder.
4. Insert the following code to the Custom code block:

<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. To apply the Parallax effect to an image, put a link to this image in the data-image attribute.
6. Click Preview to see your changes.

Watch the tutorial video for this instruction:

Adding your own code

1. In the Builder, click Add block and choose Custom code.

2. Insert your own code to the block.

Rate this page

Is there anything we can improve? Send

Don’t want to answer

Thank you for your feedback!

Useful links