[Resolved] Parallax Effect using GeneratePress theme and GenerateBlocks

[webyogi]

Hi,

First, big thank you for the wonderful suggestion to switch to the Gutenberg Editor, once I got used it to, I realized how easy and fast it is to build things.

Ok so I am building a website using generatepress and generateblocks. For one of the pages I want to implement parallax effect. Now I know I can do it using sections but can I achieve that by using blocks? I I could not find any option in blocks under background to setup Parallax Effect.

How do I achieve Parallax Effect using blocks?

Thanks!

[Tom]

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 🙂

[webyogi]

Worked like a charm!

[Tom]

Awesome 🙂

[GAMUT]

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?

[David]

Hi there,

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

[Antonio]

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

[Fernando]

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!

[Lars]

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";
};

[Fernando]

Thank you for sharing Lars!

[Author]

Posts