Scrolling the page with the Parallax effect

How It Works

The Parallax effect enables to change the position of the image in relation to other objects. You can set up unconventional scrolling of your page and make your site more eye-catching.

Who Can Use It

Partners who have already integrated Site Builder.

How to Get It

  1. Go to Publisher Account > Site Builder.
  2. 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>
  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. To apply the Parallax effect to an image, put a link to this image to the data-image attribute.
  2. Click Preview to see your changes.

Here is the tutorial video for this recipe: