Flash de dommages par Doom sur le parchemin

Cette bibliothèque JavaScript, inspirée du jeu classique Doom, ajoute un effet flash de dégâts amusant et rétro à l'expérience de défilement de votre page Web. L'effet imite intelligemment le flash emblématique de l'écran rouge de Doom en prenant des dégâts, créant une interaction "Doom à défiler" ironique.

Cet exemple se concentre sur l'animation de dommages de base à l'aide de HTML et CSS. Une superposition complète est créée:

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

 # doom-damage {
  Color d'arrière-plan: rouge;
  Position: fixe;
  en haut: 0;
  à gauche: 0;
  Largeur: 100%;
  hauteur: 100%;
  Opacité: 0;
  Pointer-Events: Aucun; / * Empêche l'interférence avec l'interaction de la page * /
}

Remarquez l' opacity: 0 et pointer-events: none Styles. La superposition est initialement invisible et ne bloque pas l'interaction utilisateur. L'utilisation opacity pour l'animation est plus efficace que le basculement display , en évitant les problèmes de performances associés aux modifications d'affichage pendant les animations.

Le flash de dégâts est déclenché en ajoutant une classe:

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

fonction doomtakedamage () {
  dmams.classlist.add ("do-damage");
  setTimeout (() => {
    dmams.classlist.remove ("do-damage");
  }, 400);
}

La classe .do-damage applique une animation CSS:

 .do-damage {
  Color d'arrière-plan: rouge;
  Animation: 0,4S Doom-Damage Forwards;
}

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

Cela crée un flash rouge immédiat suivi d'une décoloration lisse.

La dernière pièce du puzzle (non illustrée ici mais incluse dans le CodePen lié) implique un écouteur d'événements de défilement qui appelle doomTakeDamage() à des intervalles de défilement spécifiques, créant l'effet dynamique "Doom Scrolling". Le code complet est disponible dans le code de code fourni pour une implémentation complète.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!