How to wash text when it is about to go out of the visual range?

Question

How to fade and exit text when it is about to go out of the visual range? The question may be a bit vague, but I mean the following:

How do I achieve this? Perhaps with jQuery or something else?

Answer 1

There are several ways to achieve this. The simplest thing is to place an image with a gradient (from white to transparent) right at the top of the text div, so that it covers everything that goes on top.

You can also use the CSS gradient and place it at the top. Sort of:

background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */ background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */ 

It was created using this useful tool: Ultimate CSS Gradient Generator

Make sure that the element containing the gradient fixed inside the page, if scrolling the entire page or fixed at the top of another scrollable div in the case when you only need to scroll the text.

Answer 2

This is for horizontal scrolling, but it can help:

http://www.markinns.com/articles/full/recreating_the_fade_scrolling_text_marquee_on_twitter

It uses two gradually transparent images superimposed on the edges to make the text behind it disappear:

"They posted two PNG images that fade from 100% opaque to 100% transparent."