4

I am using a React library called Rellax for a parallax effect on my site. It works nicely when I scroll towards that section of the page. But, when I click on the navbar and navigate to a particular #section, this very parallax image is floating in a completely different distance to where it was supposed to be placed.

I have a feeling this is related to how the positioning of the element is calculated, since my page structure has no single main body but a group of react components.

The same issue occurred with other parallax libraries.

Right now I am referring to the parallax component this way: (Code is abbreviated and only shows sections where I refer to the effect)

export default function Advantages() {
  useEffect(() => {
    // init parallax
    new Rellax('#parallaxImage', {
      center: true,
    });
  });
  return (
    <section>
        <img 
          id="parallaxImage" 
          className="w-100" 
          data-rellax-speed="2" 
          src={ traktor }
          alt="tractor parallax" />
   </section>
)}
Mark Amery
  • 143,130
  • 81
  • 406
  • 459
Axblert
  • 556
  • 4
  • 19
  • Do you more than one `ReactDOM.render` calls in your code/page? With only one it works fine. So if you have more than one it may be a race condition. Can you add more information to your code sample? – petraszd Dec 28 '19 at 13:51

1 Answers1

2

Shouldn't you only be calling this once (by adding square brackets)?

useEffect(() => {
  // init parallax
  new Rellax('#parallaxImage', {
    center: true,
  });
}, []); // <-- Empty array
Joshua Obritsch
  • 1,253
  • 8
  • 14