Doom Damage Flash on Scroll

This JavaScript library, inspired by the classic game Doom, adds a fun, retro-style damage flash effect to your webpage's scrolling experience. The effect cleverly mimics Doom's iconic red screen flash upon taking damage, creating a tongue-in-cheek "doom scrolling" interaction.

This example focuses on the core damage animation using HTML and CSS. A full-screen overlay is created:

<div id="doom-damage"></div>

#doom-damage {
  background-color: red;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none; /* Prevents interference with page interaction */
}

Notice the opacity: 0 and pointer-events: none styles. The overlay is initially invisible and doesn't block user interaction. Using opacity for animation is more efficient than toggling display, avoiding the performance issues associated with display changes during animations.

The damage flash is triggered by adding a class:

const damage = document.getElementById("doom-damage");

function doomTakeDamage() {
  damage.classList.add("do-damage");
  setTimeout(() => {
    damage.classList.remove("do-damage");
  }, 400);
}

The .do-damage class applies a CSS animation:

.do-damage {
  background-color: red;
  animation: 0.4s doom-damage forwards;
}

@keyframes doom-damage {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

This creates an immediate red flash followed by a smooth fade-out.

The final piece of the puzzle (not shown here but included in the linked CodePen) involves a scroll event listener that calls doomTakeDamage() at specific scroll intervals, creating the dynamic "doom scrolling" effect. The full code is available in the provided CodePen for a complete implementation.

The above is the detailed content of Doom Damage Flash on Scroll. For more information, please follow other related articles on the PHP Chinese website!