Замена фильтра размытия с JavaScript

Question

Я пытаюсь изменить фильтр размытия css. Я могу изменить его на одно значение, однако я хотел бы изменить его динамически, чтобы при увеличении прокрутки добавлялось больше размытия.

Я предполагаю, что это можно сделать с помощью строки кода, такой как * 1003. *

blur((height - scrollTop) / height + px);

Я не могу заставить это работать.

https://codepen.io/tylerrowens/pen/RwPBZGP

Answer 1

Попробуйте использовать это, используя шаблон строки :

target.style.filter = `blur(${(height - scrollTop) / height}px)`;

Образец:

window.onscroll = function() {
  var target = document.getElementById("text");
  var height = window.innerHeight;
  var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  // Change this if you want it to fade faster
  height = height / 1;
  // target.style.filter = 'blur(' + (height - scrollTop) / height + 'px)';
  target.style.filter = `blur(${(height - scrollTop) / height}px)`;
};

@font-face {
  font-family: Akz;
  src: url("fonts/AkzidenzGrotesk-Regular.otf");
}

* {
  padding: 0;
  margin: 0;
}

#text {
  font-family: Akz;
  font-size: 2em;
  line-height: 1.3em;
  height: 100vh;
  filter: blur(0px);
}

.header {
  height: 100vh;
}

.footer {
  height: 100vh;
}

<div class="header">

</div>

<div id="text">
  <p>
    Litteris quem illum deserunt quid. Quis si iis dolor appellat sed et incurreret graviterque. Expetendis familiaritatem est deserunt, malis possumus admodum, quae philosophari litteris dolore voluptate, quae eiusmod e veniam sunt an se admodum e mandaremus,
    si aliqua ab ipsum do lorem non id dolore litteris, quis relinqueret deserunt quorum cupidatat.
  </p>
</div>

<div class="footer">

</div>