Всем привет! Подскажите, как доработать скрипт. Изначально буквы в элементах span имеют opacity:.2, в зависимости от того, насколько прокручен скролл, элементы должны приобретать либо opacity:1, либо возвращаться в прежнее значение 0.2. Например, скролла нет. Все буквы полупрозрачны. Скролл немного прокручен вниз - закрасились буквы С,Л,О а буквы В,О остались полупрозрачными. Вернули скрол чуть назад - ранее закрашенные буквы Л,О вернулись в исходную полупрозрачность, а С осталась подсвеченной - мы до нее назад не докрутили.
Сейчас код на таком этапе
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="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>
<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(v) {
// умножаем на диапазон возможных значений (индексов)
v *= chars.length - 1;
for (let i = 0; i < chars.length; i++) {
// расcтояние между текущим элементом и значением скролла в нашем диапазоне
let d = Math.abs(i - v);
// вычисляем значение прозрачности, как 1 минус расстояние
// тут браузер не ругается при opacity<0, поэтому к диапазону 0-1 можно не приводить
if(v === 0) {
chars[i].style.opacity = 0.2;
} else {
chars[i].style.opacity = 1 - d;
chars[i].style.transform = `scale(${1 - i + v})`
}
}
}
</script>
</body>
</html>
Доделать до требуемого результата у меня не получается, нужна ваша помощь.
Заранее благодарю!