<!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>
let chars = document.querySelectorAll('.sp');
function upd() {
var d = document.documentElement;
showLetters(d.scrollTop / (d.scrollHeight - d.clientHeight));
}
addEventListener('scroll', upd);
upd()
function showLetters(scrollValue) {
const {
length
} = chars;
const max = Math.round(length * scrollValue);
chars.forEach((char, index) => {
const diff = scrollValue && index <= max;
char.style.opacity = diff ? 1 : 0.2;
})
}
</script>
</body>
</html>