Сделать статический логотип относительного клипа div при прокрутке - CSS

Я хочу добиться следующего эффекта на одностраничном веб-сайте с прокруткой.

Сайт разделен на разные разделы (конечно, используйте тег <section>), а в левом нижнем углу есть логотип с фиксированным положением.

Я хочу иметь возможность маскировать/обрезать цвет логотипа в зависимости от того, какой раздел находится под ним. Для начала я помещаю один и тот же логотип дважды друг на друга, так что получается два логотипа с z-индексом один поверх другого.

Ниже приведены несколько быстрых макетов для справки.

Раздел 1: введите здесь описание изображения

Раздел 2: введите здесь описание изображения

Эффект, который я хочу при прокрутке:

введите здесь описание изображения

Заранее спасибо!


scroll clip css
person mitseas    schedule 19.05.2018    source источник
comment
возможный дубликат: stackoverflow.com/questions/49494026/   -  person Temani Afif    schedule 19.05.2018
comment
хм, режим Mix-Blend интересен, но это не совсем то, что я ищу, так как это своего рода эффект слоя. Я хочу конкретно выбрать, что именно я показываю/скрываю. Спасибо в любом случае, мне это может понадобиться когда-нибудь   -  person mitseas    schedule 19.05.2018
comment
еще одна идея, если вы хотите эффект смешивания прокрутки изображения с помощью css"> stackoverflow.com/questions/48998036/;)   -  person Temani Afif    schedule 19.05.2018
comment
да, это потенциально может сработать. Не стесняйтесь добавлять его в ответ, чтобы я мог пометить его как правильный. Спасибо!   -  person mitseas    schedule 19.05.2018
comment
Не нужно добавлять тот же ответ, если вы считаете, что он подходит для вас, вы можете просто проголосовать за другой;) ... И, возможно, у вас все еще будет проблема после попытки, и вы можете обновить свой вопрос, если это необходимо   -  person Temani Afif    schedule 19.05.2018

Ответы (1)


arrow_upward
0
arrow_downward

Как было указано выше, ответ на этот вопрос можно найти здесь:

Как создать эффект наложения прокрутки изображения с помощью CSS?

Я надеялся немного изменить это и попробовать подход либо со свойством clip, либо с использованием как height, так и overflow:hidden. Я не могу найти время, чтобы попробовать это прямо сейчас, но я обновлю соответственно, если когда-нибудь это сделаю.

person mitseas    schedule 26.05.2018