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!

You should use an _intersection observer_. You can read more (especially about "threshold"), and see an example here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API — Rickard Elimää, Dec 19 '20 at 21:16

score 1 · Answer 1 · answered Dec 19 '20 at 20:03

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/

answered Dec 19 '20 at 20:03

Anderson Isaac

131
6

But im using a background image for the body. So if i add the linear gradient background then the bottom will be white colored – Fabian Obersovszky Dec 19 '20 at 20:16
Then you can try ``mask-image`` as suggested here: [link](https://stackoverflow.com/questions/15597167/css3-opacity-gradient) – Anderson Isaac Dec 19 '20 at 20:33

Fade elements at the top and bottom of the screen

1 Answers1