1

I am looking for a way to apply an opacity/rgba color to all content of my page as it reaches a certain distance from the top and bottom of the page.

This is what I want to achieve:

http://www.piccante.co/images/fadeout.png

In the above example, an absolute-positioned gradient is above the text at the bottom, giving the illusion that the text is fading out. However, this is not an option for me as I am using a background image on my page. So for this project, I need to use jQuery to fade out content within a specific div as it gets closer to the top of the page, and also to fade from the bottom.

I also need to make sure that the entire div isn't fading out when reaching a certain point, it needs to just be the content at the top as it passes the viewport either up or down.

Is this possible?

thanks for the help

EDIT: Further details -

I have a fixed header and footer, and want to get the main body content to fade out/in as it comes up into the viewport from the bottom and leaves at the top. The header/footer have clear backgrounds so the content of the main body doesn't hide behind them.

http://jsfiddle.net/3k7013q4/

<body>
    <header>Header</header>
    <div class="main">
        Lorem ipsum dolor
    </div>
    <footer>Footer</footer>
</body>
caustic
  • 585
  • 2
  • 8
  • 18

1 Answers1

0

In this answer you can find some examples of using grandient in opacity, with a quite good browser support:

https://stackoverflow.com/a/2293931/3244654

I hope this helps!

-- EDIT:

As the question says, there is a background image so the first solution is probably not suitable. Check out this other answer that seems to fit better:

https://stackoverflow.com/a/15624692/3244654

Specifically this CSS line:

-webkit-mask-image: -webkit-gradient(linear, left top, 
  left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

But it seems that it doesn't have full browser support.

Community
  • 1
  • 1
Ignacio
  • 688
  • 5
  • 17
  • Will this work since I am using a background image, and not a solid color background, (e.g. I can't work with rgba(255,255,255,.#) because my background is an image and not solid white? – caustic Mar 21 '15 at 19:20
  • I added another alternative but it isn't a perfect solution. It seems to be a hard trick that needs extra features like SVG or canvas, so CSS is probably not enough. – Ignacio Mar 21 '15 at 19:31
  • I guessed scrollTop would have provided some way to do this but I guess not? :( – caustic Mar 21 '15 at 21:22