Search code examples
cssparallax

Set parallax scrolling div with opacity

https://jsfiddle.net/James2038/1x9a2gxq/1/

As shown in the jsfiddle im trying to set opacity into the scrolling div so that the clouds underneath appear slightly. Have tried many ways (rgba, opacity, img - all using css.) 

body, html {
        height: 100%;
    }

    .parallax {
        background-color: white;
        background-image: url("https://static.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg");
        height: 100%; 
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #parallax-curtain{
        height: 100%;
        background: rgb(255, 255, 255);
        background: rgba(255, 255, 255, .5); /*In rgba, the a has no effect*/
    }   


<body>

<div class="parallax"></div>

<div id="parallax-curtain"></div>

<div class="parallax"></div>

</body>
Solution

  • If im correct you are wondering why the .parallax-curtain div is not showing through to the clouds in the background correct? It is because you are not actually scrolling over the clouds with the .parallax-curtain div. When you set the background attachment for a div to fixed the only thing that happens is the background inside that div will be fixed. So in order for the parallax curtain div to show through to the clouds you will have to place it inside your parallax div like so:

    <div class="parallax">
  <div class="parallax-curtain">
  </div>
</div>

    Otherwise you are basically scrolling 3 separate divs that will never overlap each other. You can see that if you change the rgba in your example to rgba(0,0,0,0.5) which is black with 50% opacity. It will appear grey because it is just covering the white background of the page so you are seeing through to the black onto the white. So the reason it appears that nothing is happening is because you have a white rgba with opacity covering white background. You can try something like the following with the above html markup.

    .parallax {
    background-color: white;
    background-image: url("https://static.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg");
    height: 100%; 
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /*following just for demo purposes to add height and top padding*/
    height:300vh;
    padding-top:100vh;
}
.parallax-curtain{
  height:100vh;
  background:rgba(255,255,255,0.5);
}

    Here is a fiddle Fiddle Demo