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

Добрый день. Есть фрагмент страницы, по высоте всегда равный высоте окна браузера, независимо от разрешения. При скролле вниз этот экран должен постепенно становиться прозрачным. При обратном скролле - наоборот. Полагаю, что во время скролла динамически должно меняться значение opacity у этого блока - от 1 до 0 и обратно. Подскажите, в какую сторону смотреть, в каким величинам привязываться и т.д., чтобы реализовать искомое? Может, как-то значения положения скролла преобразовывать в parseFloat от 0 до 1? Но ведь при скролле вниз - значение положения скролла увеличивается, в то время как мне надо, чтобы значение opacity - уменьшалось. Полагаю, что тут больше вопрос математики, нежели чистого кода, поэтому важно, чтобы это решение было максимально экономичным с точки зрения производительности. Думаю, что какие сложные расчеты будут тормозить страницу.
  • Вопрос задан
  • 488 просмотров
Решения вопроса 1
@levchak0910
answer.correct ? press({correct: true}) : next()
Берите высоту этого элемента, "высоту" скролла, небольшие математические операции и готово.
Так как высота Вашего элемента всегда равна высоте окна браузера можно использовать 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
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
aliencash
@aliencash
Партизан
Если x[0..1] увеличивается, то (1-x) уменьшается. Тормозов не будет, не такая это большая проблема.
Ответ написан
Комментировать
mmmaaak
@mmmaaak
1 - Количество проскролленых пикселей разделить на высоту всего документа
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы