Как сделать эффект прозрачности, привязанный к скроллу?

Question

[Евгений Журов]

Добрый день. Есть фрагмент страницы, по высоте всегда равный высоте окна браузера, независимо от разрешения. При скролле вниз этот экран должен постепенно становиться прозрачным. При обратном скролле - наоборот. Полагаю, что во время скролла динамически должно меняться значение opacity у этого блока - от 1 до 0 и обратно. Подскажите, в какую сторону смотреть, в каким величинам привязываться и т.д., чтобы реализовать искомое? Может, как-то значения положения скролла преобразовывать в parseFloat от 0 до 1? Но ведь при скролле вниз - значение положения скролла увеличивается, в то время как мне надо, чтобы значение opacity - уменьшалось. Полагаю, что тут больше вопрос математики, нежели чистого кода, поэтому важно, чтобы это решение было максимально экономичным с точки зрения производительности. Думаю, что какие сложные расчеты будут тормозить страницу.

Comments

[Иван]

https://codepen.io/michaeldoyle/pen/Bhsif

Answer 1

[levchak0910]

Берите высоту этого элемента, "высоту" скролла, небольшие математические операции и готово.
Так как высота Вашего элемента всегда равна высоте окна браузера можно использовать screen.availHeight

let element = document.querySelector("Ваш элемент");
document.onscroll = () => {
    let percent = ( screen.availHeight - window.pageYOffset / 2 ) / screen.availHeight;
    if(percent <= 0) element.style.opacity = 0;
    else element.style.opacity = percent;
    console.log(percent);
};

На счет производительности посмотрите Debounce

Answer 2

[Андрей Федоров]

Если x[0..1] увеличивается, то (1-x) уменьшается. Тормозов не будет, не такая это большая проблема.

Answer 3

[Pavel Shvedov]

1 - Количество проскролленых пикселей разделить на высоту всего документа