What is a neat way to vertically decrease opacity in a group of paragraphs of text in HTML

Question

I am writing an application in rails. I have multiple paragraphs of dynamic text which are listed vertically.

I am looking at neat way through javascript or CSS to vertically increase opacity of the group of paragraphs so the body of text has the appearance if disappearing as you go down the page.

<p>Some text obviously more than i am writing here</p>   ||
<p>Some text obviously more than i am writing here</p>   || increase opacity
<p>Some text obviously more than i am writing here</p>   \/

1./ Whats a standard method of phasing just one paragraph vertically and horizontally?

2./ How would I phase the group?

Answer 1

This could be a good start?

var increment = 10;
$("p").each(function(index, value) {
   $(this).fadeTo("slow", (increment*index)/100);
});

Have a play here.

You can change the opacity increments by simply editing the "increment" variable.

Answer 2

Here's a version that will work regardless of how may <p> elements there are.

Try it out: http://jsfiddle.net/tq8E4/

var $p = $('p');

$p.css('opacity', function(i,opct) {
   return 1 - ((100 / $p.length) * i) / 100;
});

To reverse the fade effect remove the 1 - from the return statement. Wasn't sure which way you wanted to go.

Answer 3

Not sure how smooth you want the fade out to be, but if you select paragraphs with JS, the entire paragraph's opacity will change—not line-by-line. So if there's a long paragraph with 30 lines, the entire paragraph would be opacity:x.

If you want to fade out smoothly, where each line (or partial line) is slightly less opaque, your best bet is creating an element above the paragraphs that has a (png) background image of a gradient that goes from opaque to transparent. Applying position:fixed would ensure the text fades as users scroll the page, instead of just statically fading depending on where the paragraph is in the markup.

Answer 4

I'm doing something similar with a <div/> element with a CSS3 linear gradient applied to it, positioned relatively, stacked on top of the content, that gets more opaque (to full white) from top to bottom. Content slides underneath it. This is working in Webkit and Firefox now. I'll paste some of the relevant CSS.

background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
...
position: relative;
z-index: 2;