Чтобы создать эффект плавного появления текста при прокрутке с помощью CSS, вы можете использовать различные методы. Вот несколько подходов:

1. Переход непрозрачности CSS:
   • Примените начальную непрозрачность 0 к текстовому элементу.
   • Используйте переходы CSS, чтобы плавно анимировать непрозрачность до 1 при прокрутке.

.text-fade-in {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.text-fade-in.fade-in {
  opacity: 1;
}

2. CSS-анимация:
   • Определите CSS-анимацию, которая постепенно увеличивает непрозрачность текста.
   • Запускайте анимацию, когда элемент попадает в область просмотра, с помощью классов JavaScript или CSS.

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.text-fade-in {
  opacity: 0;
  animation: fade-in 0.5s ease forwards;
}

3. API-интерфейс наблюдателя пересечений:
   • Используйте API Intersection Observer, чтобы определить, когда текстовый элемент становится видимым в области просмотра.
   • Примените класс CSS для плавного появления текста с помощью CSS-переходов или анимации.

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('fade-in');
    }
  });
});
const textElement = document.querySelector('.text-fade-in');
observer.observe(textElement);