Как-то так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>.sp {transition: opacity .6s;}</style>
</head>
<body>
<div style="position:fixed;width:500px;margin:20px auto;background: #f3f4f4;border-radius: 12px;padding: 30px;">
<p class="text-2">
<span class="sp">С</span>
<span class="sp">Л</span>
<span class="sp">О</span>
<span class="sp">В</span>
<span class="sp">О</span>
</p>
</div>
<div style="height:1000px"></div>
<script>
var chars = document.querySelectorAll('.sp');
addEventListener('scroll', function() {
var d = document.documentElement;
// приводим значение скролла к интервалу [0-1]
upd(d.scrollTop / (d.scrollHeight - d.clientHeight))
});
upd(0)
function upd(scrollValue) {
// умножаем на диапазон возможных значений (индексов)
const { length } = chars;
chars.forEach((char, index) => {
// приводим положение символа к интервалу [0-1]
const position = index / (length - 1);
// вычисляем разницу положения сивола и положения скролла
const diff = scrollValue - position;
// если символ раньше скролла или скролл внизу и символ последний
if (diff > 0 || (position === 1 && scrollValue === 1)) {
char.style.opacity = 1;
} else {
char.style.opacity = 0.2;
};
})
}
</script>
</body>
</html>
Если же нужна какая-то дополнительная "плавность", то тут надо углубляться в математику.)