CODEWITHSUNDEEP
jqueryhtml
Jamielaststand
Jamielaststand

Reputation: 24

Fadeout content as it reaches header on scroll

I have a header div which has text and a transparent background. The header is position fixed to 150px. I have content div which appears underneath the header. What I would like to do is fade out each line of the content div as that line reach's 150px (the bottom of the header) from the top of the page.
So that it is not show underneath the header.

Is this possible?

Upvotes: 0

Views: 659

Answers (2)

zombiehugs
zombiehugs

Reputation: 717

After chatting with you I've determined given the background you have you will be left using -webkit-mask-image. Here's an example that would mask all images on the page with a vertical opacity mask.

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

You could use a Gradient PNG with appropriate CSS to have it at the top of your page full width and this would cause a pseudo fade for you.

You might need to adjust some of the CSS slightly to get it the height from the top that you want, also the z-index might be too high for you but this should get you started well.

HTML (IMG is the 150px gradient PNG you will need to create);

<div id="topFade">
   <img src="images/fade.png"/>
</div>

CSS

#topFade
{
   width: 100%;
   top: 0;
   position: fixed;
   height: 150px;
   float: left;
   z-index: 9998;
   margin: 0;
   padding: 0;
}
#topFade IMG
{
   width: 100%;
   height: 150px;
   margin: 0;
}

I've used this in applications in the past and works well. Mine was on bottom but will be same for top.

enter image description here

Upvotes: 1

Lix
Lix

Reputation: 47966

Hows this for a non technical solution -

Instead of having a partially transparent background, use a partly transparent gradient. This way, at the top of the image, the background will be solid (and you won't be able to see the contents behind it), and at the bottom, the gradient will be very weak and transparent letting you still see the content.

As the user scrolls, this will give the effect of a fade out. It'll work also the other way around, fading in the content.

Upvotes: 1

Related Questions