На этом шаге мы рассмотрим реализацию указанного эффекта.

    Внесем последний штрих, заставив текст заголовка появляться с эффектом увеличения непрозрачности, начиная с нижней границы контейнера. Эффект изменения прозрачности по высоте проявляется как непрозрачный текст в верхней части области просмотра и прозрачный - в нижней.

    Однако единственный текстовый элемент не может одновременно иметь несколько градаций прозрачности. Чтобы сымитировать данный эффект, нам необходимо покрыть область проявления эффекта последовательностью элементов, каждый из которых будет иметь свою степень прозрачности. В качестве таких элементов мы будем использовать элементы <div> с некоторыми общими свойствами стиля, которые мы объявили в нашей таблице стилей:

.fade-slice {
  position: absolute;
  width: 20em;
  height: 2px;
  background-color: #efd;
  z-index: 3;
}

    Значения свойств width и background-color этих элементов совпадают со значениями тех же свойств вмещающего их элемента <div id="news-feed">. Это позволит обмануть глаз пользователя, который будет полагать, что текст постепенно проявляется, а не покрыт другими элементами.

    Теперь можно создать элементы <div class="fade-slice">. Чтобы создать нужное число элементов, сначала определим высоту всей области проявления эффекта в пикселях. В данном случае мы выбрали 25 процентов высоты элемента <div id="news-feed">. Для выполнения итераций по высоте этой области мы будем использовать цикл for; в ходе каждой итерации будет создаваться новый покрывающий элемент для каждого сегмента области эффекта высотой в два пикселя:

$(document).ready(function() {
  $('#news-feed').each(function() {
    var $container = $(this);
    $container.empty();

    var fadeHeight = $container.height() / 4;
    for (var yPos = 0; yPos < fadeHeight; yPos += 2) {
      $('<div></div>')
        .addClass('fade-slice')
        .appendTo($container);
    }
  });
});

    Теперь у нас имеется 25 элементов (по одному на каждый сегмент, высотой два пикселя, в области проявления эффекта высотой 50 пикселей), но все они пока находятся в верхней части контейнера. Чтобы наш трюк сработал, необходимо каждый элемент поместить на свое место и придать ему свою степень непрозрачности. Мы можем использовать переменную цикла yPos, чтобы арифметическим путем определить значения для свойств opacity и top каждого элемента:

$(document).ready(function() {
  $('#news-feed').each(function() {
    var $container = $(this);
    $container.empty();

    var fadeHeight = $container.height() / 4;
    for (var yPos = 0; yPos < fadeHeight; yPos += 2) {
      $('<div></div>').css({
        opacity: yPos / fadeHeight,
        top: $container.height() - fadeHeight + yPos
      }).addClass('fade-slice').appendTo($container);
    }
  });
});

    Для кого-то может оказаться непросто понять эти вычисления, поэтому мы расположили получающиеся результаты в виде таблицы.

yPos	opacity	top
0	0	150
2	0.04	152
4	0.08	154
6	0.12	156
8	0.16	158
. . .	. . .	. . .
40	0.80	190
42	0.84	192
44	0.88	194
46	0.92	196
48	0.96	198

    Значения свойства opacity увеличиваются от значения, соответствующего полной прозрачности, до значения, соответствующего полной непрозрачности, по мере изменения значения свойства top от значения, соответствующего верхней границе области проявления эффекта (150), до значения, равного высоте контейнера.

    Обратите внимание: так как координата верхней границы последнего элемента <div class="fade-slice"> равна 198, а его высота равна двум пикселям, он аккуратно накроет самые нижние два пикселя элемента-контейнера <div>, имеющего высоту 200 пикселей.

    Теперь после добавления этого программного кода текст заголовка новости будет красиво проявляться в нижней части контейнера, как показано на рисунке 1.

Рис.1. Текст проявляется в нижней части контейнера

    На следующем шаге мы приведем окончательную версию приложения.

Предыдущий шаг Содержание Следующий шаг