Как сделать текст постепенно прозрачным ,

Вы указали метку JavaScript. Но в самом вопросе не привели никакого кода JavaScript, их чего я заключаю, что вы не знаете, с чего начать.

Представьте, что у вас текст в переменной. Первый этап: разбейте текст на слова. Причем сначала можете сделать кое-как, представив что слово, это текст между пробелами – потом можете продумать более сложный и грамматически правильный механизм.

После того как разбили текст на слова, у вас получился массив. Этот массив нужно как-то передалась в тот HTML, который нужен вам. Функция map даёт коллбаку не только сам элемент (в нашем случае слово), но и индекс. Это нам очень даже понадобится.

И так, чтобы посчитать процент opacity, вам нужно поделить разницу между длиной массива и индексом на длину массива: opacity = (length - index) / length.

С помощью шаблонных строк, вы стоите ваш span, с нужными значениями opacity и самого текста.

В результате, у вас массив, который содержит HTML, один span на элемент массива. Склеиваете всё это в один string. Вот и всё.

Посмотрев лишь на первый скрин, мне показалось, что текст разбит на предложения и "затухает" с каждым новым предложением.
И я изначально написал код с этим условием ¯\_(ツ)_/¯

const par = document.querySelectorAll('.par');

par.forEach(function(e) {
  let self = e,
      text = self.innerText.trim(),
      offers = text.replace(/([.!?\r\n]+)/gm, '$1|||').split('|||');
  
  self.innerHTML = '';
  offers.forEach(function(e, i) {
    let span = document.createElement('span');
    span.style.opacity = 1 - (i / offers.length);
    span.innerText = offers[i];
    self.append(span);
  });
});

.par:first-letter {
  font-size: 150%;
  font-weight: bold;
}

<p class="par">Допустим какое-то предложение. Или может такое? А что если, а хотя нет... А давай с новой строки! Всё, с новой строки.<br>Хлобысь<br>Новая строка</p>

<p class="par"></p>

<p class="par">Текст без знаков</p>

А вот аналогичная механика, но разбитие и "затухание" будет уже по словам.

const par = document.querySelectorAll('.par');

par.forEach(function(e) {
  let self = e,
      text = self.innerText.trim(),
      offers = text.replace(/(\s+)/gm, '$1|||').split('|||');
  
  self.innerHTML = '';
  offers.forEach(function(e, i) {
    let span = document.createElement('span');
    span.style.opacity = 1 - (i / offers.length);
    span.innerText = offers[i];
    self.append(span);
  });
});

.par:first-letter {
  font-size: 150%;
  font-weight: bold;
}

<p class="par">Допустим какое-то предложение. Или может такое? А что если, а хотя нет... А давай с новой строки! Всё, с новой строки.<br>Хлобысь<br>Новая строка</p>

<p class="par"></p>

<p class="par">Текст без знаков</p>

Основной момент заключается в разбитие, тут используется вот такой код

text.replace(/(\s+)/gm, '$1|||').split('|||');

Сначала он находит фрагмент по регулярке, в примере выше - \s (соответствует любому символу пробела, табуляции или новой строки.), заменяет его в тексте на \s|||, а потом полученный текст разделяет через .split('|||').
Такой способ мне показался самым удачным, ибо все регулярки или разделения "сжирали" знаки препинания или переносы строк, а данный пример "сжирает" только то, что сам создал и при разделение сохраняет текст в первоначальном виде.