Scrolling the page with the Parallax effect

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 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:

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

Watch the tutorial video for this recipe: