Как сделать такой эффект?

Question

[Happy-Child]

Суть - нужно сделать чтобы в белых секциях элемент с пером внутри был голубым, а в голубых белый. Получится ли сделать так, чтобы фон кружка менялся на границе этих секций - если круг на половину своей высоты зашёл в голубую секцию, то эта часть которая находится менялась на белый

Answer 1

[Антон Усачев]

Самый простой способ:
background-blend-mode: difference;

Но на некоторых сайтах делают сложнее. Фиксированные картинки привязываются к блокам, считается позиция блока, картинки... В общем, скрипты на скриптах. Вот тут через devtools можно посмотреть, как сделано.

UPD: еще можно скриптом высчитывать над каким блоком находится перо, и в зависимости от этого менять ему цвета. Пример скрипта:

Comments

[Happy-Child]

спасибо!