滚动时显示毁灭战士伤害闪光

著名的电子游戏《毁灭战士》会在你受到攻击时以红色闪烁屏幕。Chris Johnson 不仅借鉴了这个想法，还将《毁灭战士》中的许多 UI 元素融入到这个名为 Doom Scroller 的调侃式 JavaScript 库中。明白了吗？就像毁灭滚动，但又像《毁灭战士》滚动。很有趣，相信我。

我从 Chris 的酷炫项目中提取了一些内容，专注于伤害动画本身。红色闪光是用 HTML 和 CSS 完成的。首先，我们创建一个全屏覆盖

#doom-damage {
  background-color: red;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

请注意，它不是 display: none。因为我们必须等到动画完成才能应用它，所以动画起来要困难得多。这是因为 display 不可动画。虽然可行，但很烦人。

为了闪烁它，我们将应用一个类来实现它，但只是暂时。

const damage = document.getElementById("doom-damage");

function doomTakeDamage() {
  damage.classList.add("do-damage");
  setTimeout(function () {
    damage.classList.remove("do-damage");
  }, 400);
}

当该类激活时，我们将立即将屏幕变红（真正让它具有冲击力），然后淡出红色

.do-damage {
  background-color: red;
  animation: 0.4s doom-damage forwards;
}

@keyframes doom-damage {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

下一部分调用执行伤害闪光的函数。本质上，它跟踪当前滚动位置，如果它超过了 nextDamagePosition，它将闪红并重置下一个 nextDamagePostition，距离当前位置一个完整屏幕高度。

如果您想查看所有内容，我已经将其抽象到这个 Pen 中

评论