search

jscottsmith / react-scroll-parallax

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.
https://react-scroll-parallax.damnthat.tv/
MIT License
2.86k stars 158 forks source link

Can't get an <a> tag to be clickable inside a layer #201

Closed jacobsilver2 closed 1 year ago

jacobsilver2 commented 1 year ago

Hi, I'm trying to get some text on a banner layer to be a link, and not having much luck. I've actually managed to reproduce this on the Advanced Banner example, and have provided a fork here:

https://codesandbox.io/embed/react-scroll-parallax-hero-banner-forked-gcjjhc?fontsize=14&hidenavigation=1&theme=dark

The only code I've changed so far is:

        <a href="https://www.facebook.com">
          <h1 className="headline white">Hello World!</h1>
        </a>

I thought maybe it was a z-index thing? But that didn't seem to work. Thanks in advance for the help.

jscottsmith commented 1 year ago

@jacobsilver2 this is because there are multiple layers on top of the layer with a link. You could use z-index to bring the link to the top, but that would break the design.

Instead, disable pointer events with pointer-events: none on all the layers above the link.

Here's the updated Codesandbox:

https://codesandbox.io/embed/react-scroll-parallax-hero-banner-forked-gcjjhc?fontsize=14&hidenavigation=1&theme=dark