Изменение непрозрачности элемента на промежутке скролла — как осуществить?

Question

[Денис Букреев]

Есть множество элементов на странице, которые должны появляться (с помощью изменения непрозрачности) при скролле на определенном промежутке.

На примере одного элемента:
Есть нижняя граница, когда элемент полностью прозрачный - 900px
Есть верхняя граница, когда элементы полностью непрозрачный - 1100px
Оба числа не статичны, конечно же, их значение зависит от высоты экрана и положения на страница, но тут ничего сложного не было для вычисления.
И в этом промежутке, при скролле, элемент должен либо появляться, либо исчезать, в зависимости от направления скролла.

Я уже всю голову сломал над формулой, но у меня не получается ее вывести, хотя вроде все довольно просто - все данные есть, надо лишь правильно их использовать.

Как решить эту "задачку"?

Comments

[Павел Антонов]

wow js + animate.css

[Crimsons]

При скролле смотреть свойство элемента getBoundingClientRect().top и если оно 900 то начинать изменять opacity элемента в зависимости от направления прокрутки, свойство deltaY если не ошибаюсь . На 1px будет примерно 0.005 opacity. Считал я для примера так: 1 / (1100 - 900)

Answer 1

[Денис Шевченко]

Расстояние между максимальной и минимальной высотой берём за 100%. При скроле смотрим на сколько человек ушел от минимума к максиму в процентах и задаём столько же в значение opacity, только не забываем что opacity принимает значение от 0 до 1.

Answer 2

[Денис Васильев]

Используйте ScollMagic и gsap
Вот демка: scrollmagic.io/examples/basic/simple_tweening.html
Вот что у меня получилось: https://codepen.io/corvus-007/pen/JmOorX