注捲滾動時的末日損壞

這個受經典遊戲末日啟發的JavaScript庫為您的網頁的滾動體驗增添了有趣的複古損壞閃光效果。這種效果巧妙地模仿了毀滅性毀滅性的標誌性紅屏幕閃光，從而產生了舌頭上的“末日滾動”互動。

此示例著重於使用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”）;

函數doomtakedamage（）{
  alage.classlist.add（“ do-damage”）;
  settimeout（（）=> {
    alage.classlist.remove（“ do-damage”）;
  }，400）;
}

.do-damage類應用CSS動畫：

 .do-damage {
  背景色：紅色；
  動畫：0.4S末日損傷前鋒；
}

@keyframes doom-damage {
  0％{不透明度：1; }
  100％{不透明度：0; }
}

這會產生直接的紅色閃光燈，然後淡出光滑的淡出。

拼圖的最後一部分（未在此處顯示，但包含在鏈接的Codepen中）涉及一個滾動事件偵聽器，該偵聽器以特定的滾動間隔調用doomTakeDamage() ，從而產生動態的“末日滾動”效果。完整的代碼可在提供的Codepen中獲得完整的實現。

以上是注捲滾動時的末日損壞的詳細內容。更多資訊請關注PHP中文網其他相關文章！