Parallax Effect using GeneratePress theme and GenerateBlocks

Hi there,

We don't have a parallax option by default at the moment as it requires adding javascript.

However, you can implement your own javascript quite easily. For example: https://codepen.io/Prachl/pen/jjKzEy

So, for example, you can add this as a wp_footer hook:

<script>
window.addEventListener('scroll', throttle(parallax, 14));

function throttle(fn, wait) {
  var time = Date.now();
  return function() {
    if ((time + wait - Date.now()) < 0) {
      fn();
      time = Date.now();
    }
  }
};

function parallax() {
  var scrolled = window.pageYOffset;
  var parallax = document.querySelector(".parallax");
  // You can adjust the 0.4 to change the speed
	var coords = (scrolled * 0.4) + 'px'
  parallax.style.transform = 'translateY(' + coords + ')';
};
</script>

Then add this custom CSS:

.parallax {
    overflow-y: hidden;
}

Then add parallax as a custom class to the block you want to enable parallax on.

Hope this helps :)

Worked like a charm!

Awesome :)

This fix works well on desktop across browsers, however it fails to load on mobile. What can be done to make this snippet work across mobile as well?

Hi there,

can you start a new topic where you can share a link to the site - we can take a look.

Hello,
I've tried this workaround without success.

I have this structure:

[CONTAINER 1]
[CONTAINER 2]
[CONTAINER 3]
[CONTAINER 4]
etc.

If I add the .parallax class to [CONTAINER 2], then I see a that container vertically aligned centered in the page (and a white area in the initial position of the container).

I've seen the code and [CONTAINER 2] gets the following transformation.

element.style {
transform: translateY(3921.2px);
}

Unfortunately the site is actually running on my local machine, so I can't share you the link.

Any suggestion?

Thank you

Hi Antonio,

It would be hard to assess the issue without seeing the site.

It would be best to reach out to a developer with regards to this.

Hope this clarifies!

You can also manipulate only the background position of the image:

function parallax() {
  var scrolled = window.pageYOffset;
  var parallax = document.querySelector(".parallax");
  // You can adjust the 0.4 to change the speed
   let offset = window.pageYOffset;
   parallax.style.backgroundPositionY = offset * 0.7 + "px";
};

Thank you for sharing Lars!