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

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

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

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

Как решить эту "задачку"?
  • Вопрос задан
  • 159 просмотров
Пригласить эксперта
Ответы на вопрос 2
densisss
@densisss
Веб-разработчик.
Расстояние между максимальной и минимальной высотой берём за 100%. При скроле смотрим на сколько человек ушел от минимума к максиму в процентах и задаём столько же в значение opacity, только не забываем что opacity принимает значение от 0 до 1.
Ответ написан
Комментировать
Используйте ScollMagic и gsap
Вот демка: scrollmagic.io/examples/basic/simple_tweening.html
Вот что у меня получилось: https://codepen.io/corvus-007/pen/JmOorX
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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