javascript - 当文本从半透明容器后面经过时模糊文本

Question

我试图模糊在半透明容器标签后面滑动(带有过渡)的文本。

我试过使用 backdrop-filter和 filter属性和过滤功能 blur()但我不知道如何让它工作。

这就是我想要的样子:

我的代码(代码片段屏幕有点小，看不到整个结果):

var page = 1;
var pages = 3;
function previous() {
  document.getElementById('label-previous').classList.add('clicked');
  document.getElementById('pages').classList.remove('page' + page);
  if ( page == pages ) {
    document.getElementById('label-next').classList.remove('hidden');
  }
  if ( page == 2 ) {
    document.getElementById('label-previous').classList.add('hidden');
  }
  page--;
  setTimeout(function() {
    document.getElementById('label-previous').classList.remove('clicked');
  }, 100);
}
function next() {
  document.getElementById('label-next').classList.add('clicked');
  document.getElementById('pages').classList.add('page' + (page + 1));
  if ( page == 1 ) {
    document.getElementById('label-previous').classList.remove('hidden');
  }
  if ( page + 1 == pages ) {
    document.getElementById('label-next').classList.add('hidden');
  }
  page++;
  setTimeout(function() {
    document.getElementById('label-next').classList.remove('clicked');
  }, 100);
}

body, html {
  height: 100%;
}
body {
  background-color: #222;
  overflow: hidden;
  margin: 0;
  user-select: none;
  white-space: nowrap;
}
div {
  height: 100%;
  margin-left: 0px;
  width: 100%;
  -webkit-transition: margin-left 1s linear;
}
div.page2 {
  margin-left: -100%;
}
div.page3 {
  margin-left: -200%;
}
input[type=checkbox] {
  display: none;
}
label {
  /*
  backdrop-filter: blur(3px);
  */
  background-color: rgba(255, 255, 255, 0.1);
  color: #ccc;
  /*
  filter: blur(3px);
  */
  font-family: consolas;
  font-size: 5em;
  height: 100%;
  line-height: 100vh;
  opacity: 1;
  pointer-events: initial;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  width: 200px;
  -webkit-transition: background-color 0.1s linear, color 0.1s linear, opacity 0.8s 0.2s linear;
}
#label-previous {
  left: 0px;
}
#label-next {
  left: calc(100% - 200px);
}
label.clicked {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
label.hidden {
  opacity: 0;
  pointer-events: none;
}
span {
  color: #ccc;
  display: inline-block;
  font-family: consolas;
  font-size: 2em;
  margin-left: 400px;
  margin-top: 200px;
  width: calc(100% - 400px);
}

<div id="pages">
  <input id="previous" onchange="previous()" type="checkbox"><label class="hidden" for="previous" id="label-previous">&lt;</label>
  <span>Page 1</span><span>Page 2</span><span>Page 3</span>
  <input id="next" onchange="next()" type="checkbox"><label for="next" id="label-next">&gt;</label>
</div>

Answer 1

解决方法:

var blurred = document.getElementById('hide-blurred');
var normal = document.getElementById('hide-normal');
var position = document.getElementById('position');
function update() {
  let px = blurred.children[0].getBoundingClientRect().width + position.getBoundingClientRect().left - 200;
  blurred.style.width = (blurred.children[0].getBoundingClientRect().width - px) + 'px';
  normal.style.width = (px) + 'px';
  requestAnimationFrame(update);
}
update();
var condition = true;
position.classList.add('move');
setInterval(function() {
  if ( condition ) {
    position.classList.remove('move');
    condition = false;
  } else {
    position.classList.add('move');
    condition = true;
  }
}, 1000);

body, html {
  height: 100%;
}
body {
  background-color: #222;
  color: #ccc;
  font-family: consolas;
  font-size: 2em;
  margin: 0;
}
div#blur {
  background-color: rgba(255, 255, 255, 0.1);
  height: 100%;
  width: 200px;
}
span#position {
  position: absolute;
  top: 100px;
  -webkit-transition: left 1s linear;
}
.left {
  left: 200px;
}
.move {
  left: 130px;
}
span.hide {
  display: inline-block;
  overflow: hidden;
}
span#hide-blurred {
  filter: blur(3px);
}
span#hide-normal {
  direction: rtl;
}

<div id="blur"></div>
<span class="left" id="position">
  <span class="hide" id="hide-blurred">
    <span>Text</span>
  </span><span class="hide" id="hide-normal">
    <span>Text</span>
  </span>
</span>