最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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;
  }
});

最终效果:

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » JS css滚动加载页面屏幕闪烁红色效果

发表评论