Parallax causing buttons to not work.

[Paper Cars]

Hey all,

Been making my website for my audio production services and I've come across an issue. I'm having graphics made for my header, I'm gonna have a cool lil parallax like Firewatch does.
I got some code off google for said parallax, modified it to fit my needs. It looks fucking awesome, and functions perfectly. My nav doesn't work. The website template is using some kind of JS feature "data-scroll-index" "data-scroll-nav". I don't know anything about this function I know very basic HTML and JS. When I have the parallax on the website, regular <a> tag links work, but these nav buttons don't. I added ids to all my sections and tried a href="#about" whatever to try and do it that way and also no luck. Seems that scrolling is disabled or something?

    <div class="parallax" id="home" data-scroll-index="0">
        <div class="parallax__layer parallax__layer__0">
            <img src="assets/imgs/parallax/Layer 1.png" />
        </div>
        <div class="parallax__layer parallax__layer__1">
            <img src="assets/imgs/parallax/Layer 2.png" />
        </div>
        <div class="parallax__layer parallax__layer__2">
            <img src="assets/imgs/parallax/Layer 3.png" />
        </div>
        <div class="parallax__layer parallax__layer__3">
            <img src="assets/imgs/parallax/Layer 4.png" />
        </div>
        <div class="parallax__layer parallax__layer__4">
            <img src="assets/imgs/parallax/Layer 5.png" />
        </div>
        <div class="parallax__layer parallax__layer__5">
            <img src="assets/imgs/parallax/Layer 6.png" />
        </div>
        <div class="parallax__layer parallax__layer__6">
            <img src="" />
        </div>
        <div class="parallax__cover">
            <!--The rest of my website -->
        </div>
    </div>

* {
  box-sizing: border-box;
}
 
.parallax {
  -webkit-perspective: 100px;
          perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-left: 0;
}
 
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer img {
  display: block;
  position: absolute;
  bottom: 0;
}
 
.parallax__cover {
  background: #1d1d1d;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 4200px;
  z-index: 2;
}
 
.parallax__layer__0 {
  -webkit-transform: translateZ(-300px) scale(4);
          transform: translateZ(-300px) scale(4);
}
 
.parallax__layer__1 {
  -webkit-transform: translateZ(-250px) scale(3.5);
          transform: translateZ(-250px) scale(3.5);
}
 
.parallax__layer__2 {
  -webkit-transform: translateZ(-200px) scale(3);
          transform: translateZ(-200px) scale(3);
}
 
.parallax__layer__3 {
  -webkit-transform: translateZ(-150px) scale(2.5);
          transform: translateZ(-150px) scale(2.5);
}
 
.parallax__layer__4 {
  -webkit-transform: translateZ(-100px) scale(2);
          transform: translateZ(-100px) scale(2);
}
 
.parallax__layer__5 {
  -webkit-transform: translateZ(-50px) scale(1.5);
          transform: translateZ(-50px) scale(1.5);
}
 
.parallax__layer__6 {
  -webkit-transform: translateZ(0px) scale(1);
          transform: translateZ(0px) scale(1);
}

Thats all the code imported for the parallax.

If this is a quick fix I'll tip for the help!

 

[EviLDeEdZ]

Idk if this is a typo but your html says

<div class="parallax__cover">
<!--The rest of my website -->
</div>

If your rest of the website is coming inside this div, then scroll wont work as in the css you can see the parallax_cover position is absolute. Move the rest of the website outside of the parallax div, i cannot see the full code but I suppose this will make the rest of the website content hidden behind ur parallax div or vice versa. So for this you can simply add a margin-top on your rest of the website content. Let me know if it works, if not message me on Discord evildeedz.

 

[Paper Cars]

Idk if this is a typo but your html says

<div class="parallax__cover">
<!--The rest of my website -->
</div>

If your rest of the website is coming inside this div, then scroll wont work as in the css you can see the parallax_cover position is absolute. Move the rest of the website outside of the parallax div, i cannot see the full code but I suppose this will make the rest of the website content hidden behind ur parallax div or vice versa. So for this you can simply add a margin-top on your rest of the website content. Let me know if it works, if not message me on Discord evildeedz

This wont work. The parallax's code requires that everything be inside the parallax cover or else its weird. I'm guessing from what your saying the entire parallax will have to be me remade, or a custom scroll function of some sort. I send you the code on discord so you can see if maybe I'm wrong.