Как получить эффект прокрутки в смешанном режиме, используя JavaScript? - PullRequest
Новая
       45

Как получить эффект прокрутки в смешанном режиме, используя JavaScript?

0 голосов
/ 11 февраля 2019

Я ищу способ изменить цвет фона определенного элемента на основе фона.Что вы можете сделать в css с помощью mix-blend-mode, но я хочу иметь возможность установить цвет.

Предпочтительно, я могу использовать тот же трюк с SVG.

Чтобы показать, что я получаю, приведу jsfiddle с режимом смешивания: https://jsfiddle.net/5p69j4st/7/

.block {
  position: fixed;
  top: 10px;
  left: 10px;
  height: 25px;
  width: 25px;
  background-color: #fff;
  mix-blend-mode: difference;
}

.is-green {
  display: block;
  height: 300px;
  width: 100%;
  background-color: green;
}

.is-white {
  display: block;
  height: 300px;
  width: 100%;
  background-color: #fff;
}
<div class="block">
</div>
<div class="is-green">
</div>
<div class="is-white">
</div>
<div class="is-green">
</div>

Поэтому я хочу, чтобы фиксированный элемент с блоком классов был белым, когда он зеленый.

1 Ответ

0 голосов
/ 11 февраля 2019

Вот трюк, в котором вы можете поместить окраску фиксированного элемента в другой блок, учитывая background-attachment:fixed

.block {
  position: fixed;
  top: 10px;
  left: 10px;
  height: 25px;
  width: 25px;
  border:1px solid;
  box-sizing:border-box;
}

.is-green {
  display: block;
  height: 300px;
  width: 100%;
  background:
    linear-gradient(#fff,#fff) 10px 10px/25px 25px fixed no-repeat,
    green;
}

.is-white {
  display: block;
  height: 300px;
  width: 100%;
  background:
    linear-gradient(#000,#000) 10px 10px/25px 25px fixed no-repeat,
    #fff;
}
body {
 padding-bottom:200px;
}
<div class="block">
</div>
<div class="is-green">
</div>
<div class="is-white">
</div>
<div class="is-green">
</div>

Конечно, есть два основных недостатка этих решений: в случае наличия контента он сломает магию трюка фонаи вы обязаны изменить разные значения в разных местах.

Чтобы преодолеть это, мы можем рассмотреть псевдоэлемент и переменные CSS: 

:root {
  --t:10px;
  --l:10px;
  --h:25px;
  --w:25px;
}

.block {
  position: fixed;
  z-index:999;
  top: var(--t);
  left: var(--l);
  height: var(--h);
  width: var(--w);
  border:1px solid;
  box-sizing:border-box;
  color:red;
}

.is-green {
  display: block;
  height: 300px;
  width: 100%;
  position:relative;
  z-index:0;
  background:green;
}
.is-green::before {
  content:"";
  position:absolute;
  z-index:99;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    linear-gradient(#fff,#fff) var(--l) var(--t)/var(--w) var(--h) fixed no-repeat;
}

.is-white {
  display: block;
  position:relative;
  height: 300px;
  width: 100%;
  background: #fff;
  color:#000;
}
.is-white::before {
  content:"";
  position:absolute;
  z-index:99;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    linear-gradient(#000,#000) var(--l) var(--t)/var(--w) var(--h) fixed no-repeat;
}
body {
 padding-bottom:200px;
}
<div class="block">
Hi
</div>
<div class="is-green">
  lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
</div>
<div class="is-white">
 lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
</div>
<div class="is-green">
 lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
</div>

Теперь вам нужно только изменить цвет градиента на тот, который вы хотите.

...