Destello de daño de Doom en el desplazamiento

El famoso videojuego Doom hacía que la pantalla parpadeara en rojo cuando te golpeaban. Chris Johnson no solo tomó esa idea, sino que incorporó un montón de la interfaz de usuario de Doom en esta biblioteca de JavaScript irónica llamada Doom Scroller. ¿Consíguelo? Como, desplazamiento fatal, pero como, desplazamiento fatal. Es gracioso, créeme.

Extraje fragmentos del interesante proyecto de Chris para centrarme en la animación del daño en sí. El destello rojo se realiza en HTML y CSS. Primero, creamos una superposición de pantalla completa:

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

Tenga en cuenta que no lo es display: none. Es mucho más difícil animar eso ya que tenemos que esperar hasta que se complete la animación para aplicarla. Eso es porque displayno es animable. Es factible, simplemente molesto.

Para flashearlo, aplicaremos una clase que lo haga, pero sólo temporalmente.

const damage = document.getElementById("doom-damage");function doomTakeDamage() {  damage.classList.add("do-damage");  setTimeout(function () {    damage.classList.remove("do-damage");  }, 400);}

Cuando esa clase se active, inmediatamente pondremos la pantalla en rojo (realmente dándole ese atractivo impactante) y luego atenuaremos el rojo:

.do-damage {  background-color: red;  animation: 0.4s doom-damage forwards;}@keyframes doom-damage {  0% {    opacity: 1;  }  100% {    opacity: 0;  }}

El siguiente bit llama a la función que causa el daño. Básicamente, rastrea la posición de desplazamiento actual y, si pasa el nextDamagePosition, parpadeará en rojo y restablecerá la siguiente nextDamagePostitionaltura de pantalla completa.

Si quieres ver todo eso, lo he resumido en este Pen: