Изменение непрозрачности элемента на промежутке скролла — как осуществить?
Есть множество элементов на странице, которые должны появляться (с помощью изменения непрозрачности) при скролле на определенном промежутке.
На примере одного элемента:
Есть нижняя граница, когда элемент полностью прозрачный - 900px
Есть верхняя граница, когда элементы полностью непрозрачный - 1100px
Оба числа не статичны, конечно же, их значение зависит от высоты экрана и положения на страница, но тут ничего сложного не было для вычисления.
И в этом промежутке, при скролле, элемент должен либо появляться, либо исчезать, в зависимости от направления скролла.
Я уже всю голову сломал над формулой, но у меня не получается ее вывести, хотя вроде все довольно просто - все данные есть, надо лишь правильно их использовать.
При скролле смотреть свойство элемента getBoundingClientRect().top и если оно 900 то начинать изменять opacity элемента в зависимости от направления прокрутки, свойство deltaY если не ошибаюсь . На 1px будет примерно 0.005 opacity. Считал я для примера так: 1 / (1100 - 900)
Расстояние между максимальной и минимальной высотой берём за 100%. При скроле смотрим на сколько человек ушел от минимума к максиму в процентах и задаём столько же в значение opacity, только не забываем что opacity принимает значение от 0 до 1.
