ヘッダーのロゴの色を、背景色に合わせて切り替えたいです。

前提・実現したいこと

ヘッダーのロゴの色を、背景色に合わせて切り替える方法を探しています。
下記サイトのロゴ「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/

その他

どなたかお知恵を貸していただけたら大変ありがたいです。
どうぞよろしくお願いいたします。

行動規範の内容に同意します

回答3件

html
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="utf-8">
4<style>
5
6
7body.black a,
8body .sd,
9body.black,
10body.black a:hover,
11body.black .sd > span
12  { background: black; color: white; }
13
14
15body a,
16body.black .sd,
17body a:hover,
18body .sd > span
19  { background: white; color: black; }
20
21body.black .sd input[type="button"],
22body .sd > span:hover input[type="button"]
23  { color: black; }
24
25body .sd input[type="button"],
26body.black .sd > span:hover input[type="button"]
27  { color: white; }
28
29
30
31a {
32  padding: 1em 1em 1ex 1em;
33  font-size: x-large;
34  border: 1px gray solid;
35}
36
37.sd,
38.sd input[type="button"] 
39  { width: 150px; }
40
41.sd input[type="button"] {
42  color: white;
43  background: transparent;
44  border: 1px gray solid;
45  height: 30px;
46}
47
48.sd > span {
49  width: 0px;
50  display: inline-block;
51  transition-property: background, width;
52  transition-duration:.5s;
53  transition-timing-function:ease-in-out;
54  overflow: visible;
55}
56
57.sd > span input[type="button"] {
58  transition-property: color;
59  transition-duration:.2s;
60  transition-timing-function:ease-in-out;
61}
62
63.sd > span:hover { width: 100%; }
64
65</style>
66
67<body>
68<p><a>B</a></p>
69
70<div class="sd">
71  <span>
72    <input type="button" value="Click here !!" onclick="document.body.classList.toggle ('black')">
73  </span>
74</div>
75
76

投稿2019/02/14 10:15

退会済みユーザー

総合スコア0

html
1<div class="outer-container dark">
2  <div class="inner-container">
3    <img src="dark.svg" />
4  </div>
5</div>
6<div class="outer-container light">
7  <div class="inner-container">
8    <img src="light.svg" />
9  </div>
10</div>

css
1body {
2  background-color: blue;
3}
4img {
5  height: 50px;
6}
7.outer-container {
8  position: absolute;
9  overflow: hidden;
10  height: 50px;
11}
12.outer-container.light {
13  transform: translateY(-20px);
14}
15.light .inner-container {
16  transform: translateY(20px);
17}

こうしてみると、色分けの原理がだいたい分かるのではないでしょうか。
あとはjavascriptでtransformの値を適切に動かせばOKです。

投稿2019/02/14 08:22

7Kreuz

総合スコア112

ここを見てもらうと、白と黒の2種類のsvgを使っていますね。
これらを2枚重ねた上で、
jsで、背景色と同じスクロール量とともに、overflow: hiddenをかけた親のタグの縦幅を操作しているのではと思います。

html
1<a href="https://www.bornfight.com" class="js-home js-exit-enter-el is-active" data-item="2" style="">
2<i class="bornfight bornfight--dark">
3<img src="https://www.bornfight.com/wp-content/themes/bf/static/ui/BF-sign-dark.svg" alt="">
4</i>
5<i class="bornfight bornfight--light">
6<img src="https://www.bornfight.com/wp-content/themes/bf/static/ui/BF-sign-light.svg" alt="">
7</i>
8</a>