前提・実現したいこと
ヘッダーのロゴの色を、背景色に合わせて切り替える方法を探しています。
下記サイトのロゴ「B」や、「START A PROJECT」のボタンのように、背景の白黒の切り替わりに合わせて、ヘッダー内の要素の色が切り替わるようなデザインを実装しようとしています。
https://www.bornfight.com/
発生している問題
上記サイトのソースを見る限り、 overflow: hidden; を駆使し、 javascriptを使って transform: translateY(110%) translateZ(0px); のtranslateYの値をコントロールしているようなのですが、具体的にどのようなロジックになっているのかが、わからず、困っています。
該当のソースコード
html
<header> <div class="header_wrapper flex-between"> <!--このロゴの色を切り替えたい--> <div class="header_logo_container"> <a href="index.html" class="header_logo head1"><img src="" alt="ロゴ"></a> </div> </div> </header>
css
.header_wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 60px; z-index: 1000; } .flex-between { display: flex; justify-content: flex-between; } .header_logo_container { padding: 12px 24px; }
試したこと
似たようなデザインを実装しているサイト(下記参照)があったのですが、これだと切り替わり方が理想としているものと少し違うため、もっと良い方法を見つけたいです。
https://tech-dig.jp/js-change-color/
その他
どなたかお知恵を貸していただけたら大変ありがたいです。
どうぞよろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。