このサイト(https://i-tech-muramoto.co.jp/ )のように、ヘッダー部分がメインビジュアルの際は「白文字」、スクロールを進めてメインビジュアル抜けた際は「黒文字」に変化させる設定はどのようにすれば可能でしょうか??
※参考サイトはSTUDIO事例集のサイトです
このサイト(https://i-tech-muramoto.co.jp/ )のように、ヘッダー部分がメインビジュアルの際は「白文字」、スクロールを進めてメインビジュアル抜けた際は「黒文字」に変化させる設定はどのようにすれば可能でしょうか??
※参考サイトはSTUDIO事例集のサイトです
きちんと検証をしていないのですが、おそらくSTUDIOの「ブレンドモード」による設定かと思います。
ブレンドモードについての解説はSTUDIO公式に詳しく書かれてますのでご覧いただくと良いかと思います。
https://help.studio.design/ja/articles/5289922-ブレンドモード-フィルター-背面フィルター
CSSの記述ではありますが、仕組みはこちらの記事がわかりやすいので参考にしてみてください
なるほど!ありがとうございます!
こちらで試してみます!
これ知らんかったです、すご!!!
私がしてみたところ、具体的にどうすればよいのかわからなくて実装できなかったのですが、検証はできていますでしょうか?
BOXに対してブレンドモード「乗算」もしくは「比較(暗)」の設定を試してみるといかがでしょうか。
(固定にしてスクロールの際に下の要素と合わさる状態にしておくと試しやすいです)
以下URLでは、ヘッダーにブレンドモード「乗算」を設定して、下の色と合わさった時にブレンドできる状態にしてます。
スクロールによって色が変化します^^
https://preview.studio.site/live/4yqBLJY4Wj/2
*補足です。
元々の質問内容が、白文字→黒文字の変化方法、でしたね。(答えになってなかった)
これはブレンドモードの比率的な設定方法なのだと思いますが、未検証です。
具体的な設定はNinjaにはわからないので、どなたか分かる方にご回答いただけたら嬉しいです。。
ご回答ありがとうございます!
有識者の方どうかご教示いただけると幸いですm(__)m