<div id="doom-damage"></div>
<main>
  <h1>Scroll Down, Take Doom Damage</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo minima repellendus aut reprehenderit, neque aliquid accusamus non corporis ratione necessitatibus incidunt molestias ut, temporibus ad facere, laboriosam beatae. Molestias, perferendis?</p>
  <p>In eveniet placeat maxime recusandae ipsam necessitatibus, ea exercitationem. Porro sapiente aliquid, cumque itaque possimus aliquam, dignissimos, quaerat temporibus voluptatum esse reiciendis impedit necessitatibus fugiat sed eaque error labore eius.</p>
  <p>Cupiditate dignissimos quam, eius neque distinctio aliquid reprehenderit beatae enim? Repudiandae cumque distinctio non accusamus dolore, necessitatibus labore suscipit corporis quisquam exercitationem perspiciatis neque error laborum sequi hic. Neque, temporibus!</p>
  <p>Impedit beatae vel praesentium nesciunt repellat! Corrupti voluptate odit voluptatum, inventore quibusdam rerum nobis, fugiat perferendis ducimus doloribus, adipisci dolorem culpa alias neque esse hic est error perspiciatis aut nam!</p>
  <p>Eligendi adipisci esse iste deleniti tempore ipsam aspernatur necessitatibus accusantium ut officia vitae porro ipsum assumenda repellendus, explicabo provident error nobis. Autem quia quis, reprehenderit aliquid placeat earum voluptas aperiam?</p>
  <p>Similique maiores ipsam nam a facilis nobis mollitia aliquam culpa necessitatibus error recusandae magni, itaque beatae dolore aliquid numquam minima quaerat officia optio! Nobis amet ratione unde est voluptatum hic.</p>
  <p>Aut quisquam, aliquam, commodi est doloribus vero quia tenetur molestiae ab error magni minus iste. Tenetur earum rerum accusamus recusandae, cum omnis ab nobis, quisquam aut sint reiciendis at laudantium.</p>
  <p>Pariatur possimus officiis perferendis. Possimus dolorum perferendis, obcaecati, quod mollitia ullam doloremque animi quisquam, ab quia porro rem aliquam dolores vero dolore expedita ex sunt accusantium neque sed asperiores. Voluptas!</p>
  <p>Repudiandae nisi porro dolores quas, animi itaque natus deleniti. Vitae est eum cupiditate vero nulla animi error fugit! Enim, mollitia architecto. Ut, dolores. Eius ipsum repudiandae eveniet, iure expedita illum.</p>
  <p>Cum praesentium aliquam ad illum harum aut voluptatibus sunt necessitatibus aperiam! Doloribus provident magnam eaque ullam temporibus illo labore sunt deserunt cupiditate sed. Doloremque nam repellendus atque amet minus ut?</p>
  <p>Nihil, expedita. Sed animi cumque quidem ea perspiciatis rerum at officia dicta neque quae consequuntur vel sint dolor earum fuga fugit consectetur placeat tempora, ut voluptatem odit dolorum, quod atque!</p>
  <p>Ex incidunt, repellat voluptatibus minus provident itaque nostrum magnam iure voluptates, dolorum consectetur mollitia corporis. Dolore voluptatem ex et placeat, sint molestiae aut laboriosam assumenda libero inventore, obcaecati hic voluptatum!</p>
  <p>Ullam expedita odit sint dolore, molestiae inventore laboriosam? Iure, quisquam minus commodi dicta iste exercitationem repellendus, quasi voluptas fugiat fugit laudantium vero in, mollitia totam laborum earum porro ipsa? Provident.</p>
  <p>Illum laboriosam deleniti fuga nihil debitis voluptas facilis eveniet ratione, consequuntur earum? Nam, suscipit facilis. Nemo eligendi accusamus eum, facilis nostrum magnam rem deleniti dolores harum maxime, assumenda vero reiciendis.</p>
  <p>Inventore molestias sapiente quisquam at iure harum, cupiditate molestiae? Veniam mollitia animi, eius delectus porro sapiente est necessitatibus deleniti alias impedit obcaecati. Voluptatum laboriosam nulla at, nisi iure non minima.</p>
  <p>Sit perspiciatis cumque reiciendis quam corporis, non esse illum ipsam distinctio, ab magni earum quibusdam alias soluta, quidem beatae adipisci saepe impedit rem sunt. Quasi, doloremque? Vitae repellat recusandae voluptate.</p>
  <p>Rerum ab consequuntur itaque, hic, sed qui nostrum accusantium blanditiis quibusdam nisi quaerat, veritatis reiciendis. Eaque quaerat fuga, ratione commodi cumque voluptates nemo libero placeat harum dignissimos, quos error voluptas?</p>
  <p>Deserunt laboriosam numquam, aliquid cum facere dicta totam provident saepe officia deleniti. Odio mollitia voluptate pariatur adipisci sed sequi soluta nihil voluptatibus maiores provident molestias quibusdam optio, veritatis magnam voluptatem!</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio temporibus in ea provident facere, qui enim ducimus labore cumque aperiam vel tempora odit at ratione consectetur voluptates, illum eaque explicabo.</p>
  <p>Vel ea libero, dignissimos consectetur neque repellendus dolorum nam ullam alias reprehenderit quas quam ipsa magnam nostrum suscipit quibusdam nesciunt eaque inventore labore architecto asperiores aut nobis sunt ipsum. Sed.</p>
  <p>Quia eveniet aperiam illo! Earum, placeat ut! Quam iste delectus est rem excepturi deserunt, officia dolorem nobis laboriosam cumque optio. Eveniet, harum voluptatibus quam dolor molestias voluptatem impedit nisi similique.</p>
  <p>Blanditiis alias, repudiandae eligendi ducimus fugiat vero eaque corporis doloremque veniam illum perspiciatis ea voluptas asperiores odit dolore quos sapiente. Quidem quo nisi a saepe, laboriosam pariatur asperiores sit? Animi.</p>
  <p>Facere nostrum quae provident. Maxime nam inventore sint fuga cupiditate, nostrum sunt recusandae, ducimus eveniet doloribus autem dicta temporibus saepe tempore modi possimus molestias consectetur officiis exercitationem magnam! Ab, earum!</p>
  <p>Recusandae odio nihil nostrum obcaecati sequi! Dicta ut, possimus enim alias voluptate et numquam magnam. Iusto eius dolorem impedit, temporibus facilis obcaecati perspiciatis et fugit, reiciendis enim, libero similique officiis.</p>
  <p>Dolores aspernatur ea cum ad aperiam at facilis! Sunt, non! Enim deleniti nemo ut molestiae eius deserunt culpa, qui omnis quasi nostrum cum, hic impedit maiores, ipsum voluptatem repellendus illum.</p>
  <p>Perferendis non quasi praesentium nam vitae ut necessitatibus, sint vero quidem distinctio, hic neque assumenda sunt iure enim omnis deserunt dolor aut facere. Vel similique cumque saepe porro eaque quod.</p>
  <p>Aliquam amet asperiores, autem sapiente quae natus, non nemo quas perspiciatis nisi laborum labore in neque esse ipsum necessitatibus odit ducimus vero qui nihil aspernatur recusandae? Iure nobis quas doloribus.</p>
  <p>Inventore doloremque sed voluptas, ratione consequatur alias quo quibusdam in fugiat deserunt, architecto amet. Iste consequuntur recusandae debitis quae dolore? Obcaecati natus nam sit. Corrupti expedita aut possimus vero laboriosam.</p>
  <p>Voluptatum a sequi perspiciatis. Cum sequi, nobis commodi eius iste eveniet optio iure libero consequatur sit perspiciatis qui expedita incidunt, error quae voluptatum consequuntur saepe! Explicabo vero quasi suscipit aut.</p>
  <p>Aut consequatur esse nisi dolore, sapiente, ducimus dolorem sed, facilis quidem veniam amet asperiores adipisci autem corporis voluptatum aliquam deleniti cum magni eligendi sit expedita quis reiciendis explicabo odit! Fugit!</p>
  <p>Esse ipsum voluptatum numquam odio soluta alias id voluptatem, non dolorem culpa at, eos magni perspiciatis eius. Numquam ipsa deserunt libero, harum perspiciatis pariatur? Sequi accusantium voluptate ipsa corrupti quos.</p>
  <p>Cupiditate, similique totam delectus ut error, nam blanditiis accusantium quasi qui dolore soluta. Aspernatur mollitia veritatis pariatur voluptates animi quos velit dolores numquam nihil voluptatibus id necessitatibus, consectetur error corporis.</p>
  <p>Sint explicabo odio commodi dicta hic, ducimus natus doloribus iusto veniam error odit officia dignissimos eveniet ex nemo, provident, sed delectus debitis nobis sit atque nam exercitationem. Nesciunt, corporis! Asperiores.</p>
  <p>Dignissimos commodi amet dolore maxime ipsa neque, quo porro reiciendis ex voluptatem aut distinctio natus quisquam accusamus doloribus sunt architecto laborum ratione excepturi numquam consequuntur at unde voluptate. Voluptatem, dolore.</p>
  <p>Minima aperiam rem asperiores facilis quaerat aut soluta, vero labore officiis excepturi sequi dolorem? Quia accusantium quas quae voluptatem, quasi ut in, magni ipsum repudiandae, dolorem dolores deleniti a obcaecati?</p>
  <p>Harum recusandae eveniet distinctio modi voluptatum cum asperiores similique minus quos fugit vero deserunt debitis eius assumenda, praesentium nemo doloribus. Quas magnam minima minus pariatur maiores accusantium maxime odit. Assumenda.</p>
  <p>Ullam error tempora fuga accusantium consectetur veritatis, perspiciatis repellendus, voluptatibus voluptates iure quaerat quidem fugiat placeat eveniet, temporibus possimus. Veritatis quisquam nam, qui praesentium in tempora. Ipsa aliquam veritatis molestias?</p>
  <p>Ea, obcaecati ipsam debitis architecto inventore sunt impedit saepe ipsum quos placeat quo, magnam cum eius, quas minima soluta consequuntur fuga sapiente blanditiis vero. Obcaecati impedit numquam vel velit hic.</p>
  <p>Vero sit excepturi, perferendis iste consequatur facere suscipit nisi perspiciatis maxime voluptatum repellat soluta pariatur facilis odit fugiat dolore doloremque laborum sed culpa aut ex aliquid! Soluta provident quam nesciunt?</p>
  <p>Delectus repellat facilis rerum expedita quos quidem, ullam ut saepe et quam est, accusamus accusantium exercitationem impedit tenetur repudiandae earum numquam deleniti ipsam dicta, perspiciatis soluta eveniet facere! Atque, labore?</p>
  <p>Velit incidunt minima dignissimos. Debitis reprehenderit nostrum magni laborum quidem perspiciatis, iste laudantium fugit numquam placeat adipisci incidunt minima nemo, sunt eos aliquam vitae id tempora earum dolorum itaque ducimus!</p>
  <p>In suscipit quisquam voluptatibus tenetur ratione porro eveniet ex nostrum quae culpa necessitatibus neque, atque magnam eligendi, repellat ipsum maiores, eius ducimus quidem molestiae voluptatem! Dolorem rem eaque repellendus eos.</p>
  <p>Nostrum culpa cumque laborum modi voluptate excepturi sit illum nobis, ut fugiat qui, quam omnis, ab totam perferendis id veritatis praesentium accusamus aut reprehenderit cum vel impedit facilis magni! Ex.</p>
  <p>Natus, numquam magnam, ipsum fuga fugiat laboriosam voluptatum, exercitationem sunt officiis reprehenderit excepturi ducimus! Maxime harum alias eaque, consequuntur ut deserunt explicabo debitis qui laboriosam natus sunt sit voluptatem aspernatur?</p>
  <p>Repellendus eligendi iste ipsam aspernatur deserunt voluptatum, corporis suscipit inventore mollitia tenetur voluptate deleniti quia et excepturi non, autem doloremque reiciendis officiis. Perspiciatis vero earum deleniti mollitia, quidem magni sequi?</p>
  <p>Earum odit quis dolorem quibusdam soluta fugit eum culpa cupiditate cum. Id, enim iure modi unde velit pariatur nulla, alias laboriosam, beatae sequi sit. Nam perspiciatis dolorum architecto reiciendis asperiores!</p>
  <p>Temporibus tempore optio nihil aperiam molestias error perferendis sed atque veritatis, velit libero nesciunt magni tempora cum aliquam voluptate deleniti sit saepe, similique itaque est sint, impedit dolorem? Delectus, doloremque!</p>
  <p>Doloremque dolor ut id culpa commodi excepturi at nisi error dolorem iste possimus aliquid, voluptatum aliquam magni beatae animi voluptates itaque consequuntur nulla aspernatur. Voluptas sed itaque quaerat ipsum mollitia!</p>
</main>
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;
  }
}

h1 {
  line-height: 1;
}
View Compiled
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;
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Packages

This Pen doesn't use any packages.