CSSまたはSVGで背景色に一致するテキストカラーをアニメーション化しますか？

Question

このような質問をするのに最適な場所があるかどうかはわかりません。しかし、私はこれをどこから始めるべきか、誰かが私を正しい場所に向けることができれば分かります。

これに最適な検索用語は何ですか。

このようなタイポグラフィの効果を再現しようとしています。 「オーガニック」を見ると、ユーザーがページを下にスクロールすると塗りの色と間隔が変わります。塗りつぶしの色がテキストの半分を塗りつぶしています。 https://dribbble.com/shots/2623261-Landing-Page-Animation

CSSは可能ですか？またはSVG？はいの場合は、どの分野を調査すべきですか？

---

*更新：この記事が見つかりました。 https://css-tricks.com/reverse-text-color-mix-blend-mode/

Answer 1

CSSで可能です。 答えを確認してくださいhere。それは単純な効果です。

基本的に、複数のテキストを追加します。 1つは白で、もう1つは異なるdivで黒の色で、それぞれのdivにクリッピングを追加するので、スクロールすると、あなたが望むエフェクトのように見えます。