巻物のドゥームダメージフラッシュ

クラシックゲームDoomに触発されたこのJavaScriptライブラリは、Webページのスクロールエクスペリエンスに楽しくレトロなダメージフラッシュ効果を追加します。この効果は、ダメージを受けたときにDoomの象徴的な赤いスクリーンフラッシュを巧みに模倣し、舌の「Doom Scrolling」相互作用を作成します。

この例は、HTMLとCSSを使用したコアダメージアニメーションに焦点を当てています。フルスクリーンオーバーレイが作成されます。

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

 ＃doom-damage {
  背景色：赤;
  位置：修正;
  上：0;
  左：0;
  幅：100％;
  高さ：100％;
  不透明：0;
  ポインターイベント：なし; / *ページインタラクションとの干渉を防ぎます */
}

opacity: 0とpointer-events: noneスタイル。オーバーレイは最初は見えず、ユーザーの相互作用をブロックしません。アニメーションにopacity使用することは、 displayを切り替えるよりも効率的であり、アニメーション中のディスプレイの変更に関連するパフォーマンスの問題を回避します。

クラスを追加することにより、ダメージフラッシュがトリガーされます。

 constダメージ= document.getElementById（ "Doom-Damage"）;

function doomtakedamage（）{
  damage.classlist.add（ "do-damage"）;
  setimeout（（）=> {
    Damage.classlist.Remove（ "do-damage"）;
  }、400）;
}

.do-damageクラスは、CSSアニメーションを適用します。

 .do-damage {
  背景色：赤;
  アニメーション：0.4s Doom-Damage Forwards;
}

@KeyFrames DOOM-DAMAGE {
  0％{不透明：1; }
  100％{不透明：0; }
}

これにより、すぐに赤いフラッシュが作成され、その後滑らかなフェードアウトが行われます。

パズルの最後のピース（ここには示されていませんが、リンクされたCodepenに含まれています）には、特定のスクロール間隔でdoomTakeDamage()を呼び出すスクロールイベントリスナーが含まれ、動的な「Doom Scrolling」効果が作成されます。完全な実装のために、提供されたCodepenで完全なコードを利用できます。

以上が巻物のドゥームダメージフラッシュの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。