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

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197430.html

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

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

最终效果：

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/