Как решить проблему со сменой цвета элемента на фоне другого цвета при скролле?

Question

[Данил Доценко]

пример скролла на сайте monxy.ru

у первой секции белый фон, на следующих черный
должно выглядеть так (см. приложил картинку)

Answer 1

[Ivan Bogachev]

Если нужно именно такой частичный переход сделать, да еще и кроссбраузерно, то можно отталкиваться от следующего подхода:

• Есть несколько секций с overflow: hidden
  
• Иконки дублируются в каждой секции, но с разными цветами
  
• В процессе скролла двигаем иконки, чтобы они оказывались на одном и том же месте относительно экрана
  

Прототип для изучения:

Вариант сделать это на position: fixed - не вариант, т.к. в сочетании с overflow: hidden может происходить неведомая магия.

Answer 2

[Андрей Гончаров]

Из современного и легкого в применении:

.header{
    mix-blend-mode: difference;
}

Так себе поддержка, но в хроме норм

Comments

[Данил Доценко]

а чтоб норм поддержка была?