Doom Damage Flash on Scroll

Doom Damage Flash on Scroll

Chris Johnson’s tongue-in-cheek JavaScript library Doom Scroller borrows the iconic screen-red damage flash from the video game Doom, bundling it with a healthy dose of the game’s UI. The core of the effect—the red flash itself—can actually be pulled out and built purely with HTML and CSS.

The setup starts with a full-screen overlay element:

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

Notably, that overlay should not be set to display: none. Since display is not an animatable property, hiding it that way forces you to wait until an animation finishes before you can safely apply it—a workable but tedious pattern.

To trigger the flash, a class is applied temporarily. When that class activates, the screen turns instantly red to deliver the shock effect, then fades the red away:

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

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

The logic driving the effect tracks the current scroll position. When the user scrolls past a nextDamagePosition threshold, the function fires the red flash and resets the next trigger point one full viewport height further down the page. The full implementation is available as a single CodePen demo.