Schadensschaden Blitz auf die Schriftrolle

Diese JavaScript-Bibliothek, inspiriert vom klassischen Spiel-Doom, verleiht dem Scrolling-Erlebnis Ihrer Webseite einen unterhaltsamen Flash-Effekt im Retro-Stil. Der Effekt ahmt den legendären roten Bildschirm von Doom nach Schäden geschickt nach und erzeugt eine witzige "Doom Scrolling" -Ver Interaktion.

Dieses Beispiel konzentriert sich auf die Kernschadenanimation mithilfe von HTML und CSS. Eine Vollbildüberlagerung wird erstellt:

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

 #Doom-Damage {
  Hintergrundfarbe: Rot;
  Position: fest;
  Top: 0;
  links: 0;
  Breite: 100%;
  Höhe: 100%;
  Deckkraft: 0;
  Zeiger-Events: Keine; / * Verhindert Störungen mit der Seiteninteraktion */
}

Beachten Sie die opacity: 0 und pointer-events: none Stile. Das Overlay ist ursprünglich unsichtbar und blockiert die Benutzerinteraktion nicht. Die Verwendung von opacity für Animation ist effizienter als das Umschalten display und vermeidet die Leistungsprobleme, die mit Anzeigenänderungen während der Animationen verbunden sind.

Der Schadensblitz wird durch Hinzufügen einer Klasse ausgelöst:

 const schaden = document.getElementById ("Doom-Damage");

Funktion doomtakedAmage () {
  schaden.classlist.add ("Do-Damage");
  setTimeout (() => {
    schaden.classlist.remove ("Do-Damage");
  }, 400);
}

Die .do-damage wendet eine CSS-Animation an:

 .do-schaden {
  Hintergrundfarbe: Rot;
  Animation: 0,4s Doom-Damage-Stürmer;
}

@keyframes Doom-Damage {
  0% {Deckkraft: 1; }
  100% {Deckkraft: 0; }
}

Dies erzeugt einen sofortigen roten Blitz, gefolgt von einem glatten Ausfall.

Das letzte Stück des Puzzles (nicht hier angezeigt, sondern im verknüpften CodePen) beinhaltet einen Scroll -Ereignishörer, der in bestimmten Bildlaufintervallen doomTakeDamage() nennt und den dynamischen "Doom Scrolling" -Effekt erzeugt. Der vollständige Code ist in dem bereitgestellten CodePen für eine vollständige Implementierung verfügbar.

Das obige ist der detaillierte Inhalt vonSchadensschaden Blitz auf die Schriftrolle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!