JS css滚动加载页面屏幕闪烁红色效果

技术源于生活，最近在某款游戏中遇到这样一个特效，当角色在被击中时屏幕将闪烁红色效果。于是激发了我的好奇心，不禁反问道如果让自己去实现这样一个效果该如何实现呢？当然我不会写一个游戏来实现它，这样不现实，为了更加生动地展示该效果，我会通过滚动页面来展示闪烁红色效果。

红色闪烁效果是在 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);
}

当该类激活时，我们将立即将屏幕变成红色（使它具有震撼力），然后将红色逐渐消失：

下一位调用执行损坏闪烁的函数。本质上，它会跟踪当前滚动位置，如果超过nextDamagePosition，它将闪烁红色并重置下nextDamagePostition一个全屏高度。

完整代码如下：

HTML 结构

<div id="doom-damage"></div>
<main>
<p>这里是内容</p>
</main>

CSS 结构

main {
  max-width: 500px;
  margin: 1rem auto;
  font: 120%/1.6 system-ui;
  padding: 1rem;
}

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

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

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

JS 结构

let nextDamagePosition = null;
let doomLastScroll = 0;
let ticking = false;
const damage = document.getElementById("doom-damage");

function doomCheckForDamage(scrollPos) {
  // Do something with the scroll position
  if (scrollPos > nextDamagePosition) {
    doomTakeDamage();
    nextDamagePosition += window.innerHeight;
  }
}

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

window.addEventListener("scroll", function (e) {
  if (nextDamagePosition === null) {
    nextDamagePosition = window.innerHeight + window.scrollY;
  }
  doomLastScroll = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function () {
      doomCheckForDamage(doomLastScroll);
      ticking = false;
    });

    ticking = true;
  }
});

最终效果：

以上关于JS css滚动加载页面屏幕闪烁红色效果的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。