Как реализовать частичное накрывание 1го блока вторым при скролле?

Question

[Руслан Дасаев]

Здравствуйте, коллеги. Интересует ваше мнение по способам создания эффекта ссылка на гифку(нажимаете сверху справа на три точки - открыть оригинал). Сначала верхушка второго блока налезает на 1й. Потом в определенный момент эффект перестает срабатывать и дальше следует стандартная прокрутка. Как вы решали эту задачу в своей практике?

Comments

[Rustam Bainazarov]

Обычный transform + opacity. На IS считаем прокрутку, к ней привязываем transform. Когда значение прокрутки достигает определённого момента, начинаем добавлять opacity от 1 к 0.

[Руслан Дасаев]

Рустам Байназаров, Спасибо, за ответ. Не совсем понятно как второй блок будет накрывать первый. То есть 1му нужно добавить position fixed? Но тогда он вылезет из стека документа и сразу целиком накроется вторым.

[Rustam Bainazarov]

Руслан Дасаев, z-index.

Answer 1

[Kirito Kirigaya]

На JS можно сделать подобное, задавая разные стили боксам при прокрутки страницы.
Эта статья может помочь вам ссылка.