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滚动加载页面屏幕闪烁红色效果
码云笔记 » JS css滚动加载页面屏幕闪烁红色效果