Что такое аккуратный способ вертикального уменьшения непрозрачности в группе абзацев текста в HTML

Question

Я пишу заявку в рельсах.У меня есть несколько абзацев динамического текста, которые перечислены по вертикали.

Я ищу аккуратный путь через javascript или CSS, чтобы вертикально увеличить непрозрачность группы абзацев, чтобы при исчезновении страницы текст тела имел вид, если он исчезал.* 1. / Что является стандартным методом поэтапного построения только одного абзаца по вертикали и горизонтали?

2. / Как бы я распределил группу?

Answer 1

Это может быть хорошим началом?

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

Есть игра здесь .

Вы можете изменить приращение непрозрачности, просто отредактировав переменную "increment".

Answer 2

Не уверен, насколько плавным должен быть эффект затухания, но если вы выберете абзацы с помощью JS, непрозрачность всего абзаца изменится, а не построчно. Так что, если есть длинный абзац с 30 строками, весь абзац будет непрозрачным: x.

Если вы хотите плавного затухания, когда каждая строка (или частичная линия) немного менее непрозрачна, лучше всего создать элемент над абзацами с фоновым изображением (png) градиента, который переходит от непрозрачного к прозрачный. Применение позиции: фиксированный обеспечит исчезновение текста при прокрутке страницы пользователями, а не просто статическое затухание в зависимости от того, где находится абзац в разметке.

Answer 3

Вот версия, которая будет работать независимо от того, как <p> элементы могут быть.

Попробуйте: http://jsfiddle.net/tq8E4/

var $p = $('p');

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

Обратноеэффект затухания удаляет 1 - из оператора return.Не был уверен, куда вы хотели пойти.

Answer 4

Я делаю нечто похожее с элементом <div/> с примененным к нему линейным градиентом CSS3, расположенным относительно, сложенным поверх содержимого, которое становится более непрозрачным (до полного белого) сверху вниз.Содержание скользит под ним.Это работает в 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;