How to allow users scroll page with 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 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. 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 instruction:


Adding your own code

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

  1. Insert your own code to the block.

Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Rate this page
Rate this page
Is there anything we can improve?

Don’t want to answer

Thank you for your feedback!

Useful links

Last updated: July 20, 2021

Found a typo or other text error? Select the text and press Ctrl+Enter.

Report a problem
We always review our content. Your feedback helps us improve it.
Provide an email so we can follow up
Thank you for your feedback!