Можно ли использовать статический фон за анимированным холстом в режиме mix-blend-mode? - PullRequest
Новая
       84

Можно ли использовать статический фон за анимированным холстом в режиме mix-blend-mode?

0 голосов
/ 23 октября 2019

Я пытаюсь создать анимацию, где каждый элемент будет менять свой цвет в зависимости от фона родительского элемента div. Я использую pts.js для создания анимации. Он рисует все на холсте.

Вот мои настройки: fiddle .

После добавления mix-blend-mode: difference; на холст весь градиентный фон исчезает, несмотря на то, что холст (#pt) имеет свойфон установлен прозрачным. Я хочу, чтобы анимированные линии динамически меняли свой цвет, как это делает статический текст. Как мне этого добиться? Это возможно даже с чистым CSS?

enter image description here

1 Ответ

1 голос
/ 23 октября 2019

Вы можете поместить градиент поверх холста (используя псевдоэлемент ::before), и тогда mix-blend-mode будет работать: 

$(document).ready(() => {
  Pts.namespace(window);
  const run = Pts.quickStart("#pt", "transparent");
  let pts = new Group();
  space.add({
    start: () => {
      pts = Create.distributeRandom(space.bound, 50);
    },
    animate: (time, ftime) => {
      const perpend = new Group(
        new Pt(0, 0),
        new Pt(0, window.innerWidth)
      ).op(Line.perpendicularFromPt);
      pts.rotate2D(0.0055, space.center);
      pts.forEach((p, i) => {
        const lp = perpend(p);
        form.stroke(`rgba(255,255,255,255`, 1.01).line([p, lp]);
        form.fillOnly(`#000000`).point(p, 1);
      });
    },

  });
  space.bindMouse().bindTouch().play();
});
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
}

#staticBg {
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  position: fixed;
}

#staticBg::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 60%);
  content: '';
  mix-blend-mode: difference;
  z-index: 1;
}

#pt {
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  position: fixed;
}

.text {
  color: white;
  font-size: 50px;
  text-align: center;
  width: 100vw;
  mix-blend-mode: difference;
  z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pts/0.8.8/pts.min.js"></script>
<div id="staticBg">
  <canvas id="pt"></canvas>
  <div class="text">TEST STRING</div>
</div>
...