Doom Damage Flash On Scroll

Das Videospiel Doom hat den Bildschirm berühmt rot aufleuchten lassen, wenn man getroffen wurde. Chris Johnson hat diese Idee nicht nur aufgegriffen, sondern auch eine ganze Reihe von Benutzeroberflächenelementen aus Doom in diese humorvolle JavaScript-Bibliothek namens Doom Scroller integriert. Verstehen Sie? Wie, Doom Scrolling, aber wie, Doom Scrolling. Es ist lustig, vertrauen Sie mir.

Ich habe Teile aus Chris' coolem Projekt extrahiert, um mich auf die Schadensanimation selbst zu konzentrieren. Der rote Blitz wird in HTML und CSS realisiert. Zuerst erstellen wir ein Vollbild-Overlay

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

Beachten Sie, dass es nicht display: none ist. Das ist viel schwieriger zu animieren, da wir warten müssen, bis die Animation abgeschlossen ist, um sie anzuwenden. Das liegt daran, dass display nicht animierbar ist. Es ist machbar, nur ärgerlich.

Um es aufleuchten zu lassen, wenden wir eine Klasse an, die dies tut, aber nur vorübergehend.

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

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

Wenn diese Klasse aktiviert wird, schalten wir den Bildschirm sofort auf Rot (was ihm wirklich den Schockeffekt verleiht) und lassen dann das Rot verblassen

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

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

Das nächste Stück ruft die Funktion auf, die den Schadensblitz auslöst. Im Wesentlichen verfolgt es die aktuelle Scroll-Position, und wenn diese über der nextDamagePosition liegt, wird der Bildschirm rot aufleuchten und die nächste nextDamagePostition um die Länge eines vollen Bildschirmfensters verschieben.

Wenn Sie all das sehen möchten, habe ich es in diesen Pen abstrahiert

Kommentare