Как сделать, чтобы цвет текста менялся через курсор как в примере?

Question

[ne_pes]

Как сделать, чтобы цвет текста менялся через курсор, как на этом сайте?

Answer 1

[Ragtime Kitty]

mix-blend-mode: difference;

Comments

[ne_pes]

А такое как реализовать, чтобы картинка красила всегда в белый? тут наверно уже не подойдет mix-blend-mode: difference;
https://seekerproject.com/stage/2

[Ragtime Kitty]

ne_pes, что вы имеете ввиду под красить картинку в белый?

[ne_pes]

Ragtime Kitty, там к курсору "прилеплена"картинка, когда она заезжает на текст, то текст меняет цвет на белый

[Ragtime Kitty]

ne_pes, можете приклеить картинку к курсору. Только там не меняется цвет на белый, а грубо говоря инвертируется серый. В моем примере так же - изначально черный цвет текста при наведении будет белым.

[ne_pes]

Ragtime Kitty, Вот, а в примере он именно не инвертируется, а меняется как-то( у картинок разный фон, но текст всегда становится белым

[ne_pes]

Ragtime Kitty, вот так https://clck.ru/G8xtR

[Ragtime Kitty]

ne_pes, конкретно в этом примере, как я поняла, используется three.js для этого. Канвасы, WebGl и прочие страшные вещи. Это уже совсем другое и простым режимом наложения это не сделать.

[ne_pes]

Ragtime Kitty, понял, спасибо

Answer 2

[Виталий Першин]

Не полностью разобрался как у них реализовано, но в основе лежит свойство mix-blend-mode
Написал небольшой пример: