[Support request] Can only apple parallax effect to one GneratePress container at a time?

[Joe]

Hello-

I tried Tom’s suggestion here:

https://generatepress.com/forums/topic/parallax-effect-using-generatepress-theme-and-generateblocks/

But it only seems to work on one GP container at a time.

Is there a way to have this work for multiple elements on the same page?

Please advise.

Thsanks!

[Ying]

Hi Joe,

I modified the code a bit so it will apply to all blocks with the parallax class, but please be noted it’s a question that is out of our support forum scope, we are trying our best to help 🙂

Make sure you wrap the code with <script> and </script> tags when adding to the hook element.

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 parallaxElements = document.querySelectorAll(".parallax");
  // Iterate over all parallax elements and update their positions
  parallaxElements.forEach(function(element) {
    var coords = (scrolled * 0.4) + 'px';
    element.style.transform = 'translateY(' + coords + ')';
  });																			 };

[Joe]

Thank you so much! And I am sorry to be such a pain. Not to sound ungrateful, but still does not seem to be working?

[Joe]

Hmm that seems to work, I was targeting the wrong elements with the class. One problem though, the items below the first one seem to scroll too far down. Sorry, but is there anything to be done about this? Thanks for your time!

[Ying]

I’m sorry to say, but it’s really way out of the scope of our support forum.
You will need to hire a developer for a custom solution or look for other solutions on line 🙁

Thanks for your understanding!

[Author]

Posts