HTML의 텍스트 단락 그룹에서 불투명도를 수직적으로 줄이는 깔끔한 방법은 무엇입니까

Question

난 레일에 응용 프로그램을 쓰고 있어요. 세로로 나열된 여러 개의 동적 텍스트 단락이 있습니다.

자바 스크립트 또는 CSS를 통해 깔끔한 방식으로 텍스트의 본문이 페이지 아래로 이동할 때 모양이 표시되도록 단락 그룹의 불투명도를 세로 늘리는 방법을 찾고 있습니다.

<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./단 한 단락을 수직 및 수평으로 단계적으로 조정하는 표준 방법은 무엇입니까?

2./그룹을 어떻게 위상을 둡니까?

Answer 1

이것은 좋은 시작일 수 있습니까?

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

연극은 here입니다.

단순히 "증가"변수를 편집하여 불투명도 증분을 변경할 수 있습니다.

Answer 2

여기에 어떤 요소가 있을지 모르지만 작동하는 버전은 <p>입니다.

그것을 밖으로 시도 :http://jsfiddle.net/tq8E4/

var $p = $('p'); 

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

은 페이드 효과가 return 문에서 1 -을 제거 역으로. 당신이 가고 싶었던 방법이 확실하지 않았습니다.

Answer 3

페이드 아웃을 얼마나 부드럽게할지 잘 모르지만 JS로 단락을 선택하면 전체 단락의 불투명도가 라인 단위가 아니라 변경됩니다. 따라서 30 줄의 긴 단락이있는 경우 단락 전체가 불투명합니다 (x).

각 줄 (또는 부분 선)이 약간 불투명 한 곳에서 부드럽게 페이드하고 싶다면 가장 좋은 방법은 불투명 한 그라데이션 배경 이미지 (png)가있는 단락 위에 요소를 만드는 것입니다. 투명하게. 위치 적용 : 고정은 단락이 마크 업에있는 지에 따라 정적으로 페이드하는 대신 사용자가 페이지를 스크롤 할 때 텍스트가 흐려 지도록합니다.

Answer 4

CSS3 선형 그래디언트가 적용된 <div/> 요소와 비슷한 기능을하고 있습니다. 상대적으로 위치가 정해져 있고 내용 위에 쌓여 있으며 위에서 아래로 더 불투명 해집니다. 내용이 그 아래에 미끄러 져 있습니다. 이것은 현재 Webkit 및 Firefox에서 작동하고 있습니다. 관련 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;