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. Giantess Videos and comics

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

Tal vez te puede interesar:

1. La innovación no puede mantener la Web rápida
2. Rendimiento web ultrarrápido
3. Tabla de contenidos fijos con estados activos de desplazamiento
4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

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 d

programar

es

https://aprendeprogramando.es/static/images/programar-destello-de-dano-de-doom-en-el-desplazamiento-1681-0.jpg

2025-01-08

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente