Fade elements at the top and bottom of the screen

Question

I want to fade out all elements that reach the top or bottom of the page. An example: https://css-tricks.com/examples/FadeOutBottom/

I want the exact same thing, but with another method because I use a background image for the body so I cant use this method because it uses an image to fade out the elements.

I also tried this, but it did not work for me because for a long text <p> tag the parts that are not at the top will be also faded:

 var elements = document.querySelectorAll( 'body *' ); $(window).scroll(function(){ $("h2").css("opacity", 1 - $(window).scrollTop() / $("h2").offset().top); $("p").css("opacity", 1 - $(window).scrollTop() / $("p").offset().top); });

What should I do? Thank you!

Answer 1

You can achieve the same effect by using linear-gradient instead of an image:

#bottom_fade {
    position: fixed;
    height: 200px;
    width: 100%;
    bottom: 0;
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0)100%);
    z-index: 99;
}

Check this website if you want to work on a linear-gradient that better suits you: https://cssgradient.io/