Как сделеать появление блоков при скролле?

Question

[oledgik]

Помогите пожалуйста, как сделать на сайте плавное появление блока, как я понял при скролле у нижнего блока меняется z-index и растет opacity до 1 когда доскролил до самого блока. Подскажите как реализовать изменения opacity
Пример как надо:
work.antonandirene.com/silasveta
www.rbc.ru - тут когда скролим внутри новости (при чтении) то переход на следующию новость примерно таким же образом показано плавно появляется новость ниже.
ru.wix.com - здесь при переходе с главного блока на нижний контент тоже меняется opacity плавно до одного у нижнего блока "content"
Как я понимаю само наложение блоков, как презентация можно сделать по средствам этого скрипта https://codyhouse.co/demo/fixed-background-effect/... , но хотелось бы реализовать плавное появление блоков при скролле как в сайте примере, а не просто перелистование.

Answer 1

[Иван Вишневский]

Чтобы следить за прокруткой, воспользуйтесь:
window.onscroll = function() {};.
Дальше вы можете получить прокрученные пиксели через:

scroll = (document.body.scrollTop+0 || document.documentElement.scrollTop+0);

.
Затем всё просто - делаете прямую зависимость, допустим:
elem.style.opacity = scroll / 5.
Дальше можно вручную отстроить всё ручной проверкой, сделать if, который будет изменять прозрачность только при определённых значениях скролла, ограничить ненужное изменение прозрачности, если она достигает 1, и.т.д..