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

1. Open your project in Publisher Account and go to the Storefronts > Websites section.
2. In the Sites section, select your site and click Open Site Builder.
3. If your site includes multiple pages, select the one you need:
   1. Click the current page title at the top of the builder.
   2. Select the necessary page from the drop-down list.
4. From anywhere on the page, click Add block.
5. Select the Custom code block.
6. Add the HTML code with the effect script in one of 2 ways:
   • Use your own code.
   • Use the ready-made script. To do this:
     1. Insert the following code into the block:

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

7. Click Preview to see your changes.

Watch the tutorial video for this instruction:

Useful links