스크롤의 운명 손상 플래시

클래식 게임 Doom에서 영감을 얻은이 JavaScript 라이브러리는 웹 페이지의 스크롤 경험에 재미 있고 레트로 스타일의 손상 플래시 효과를 추가합니다. 이 효과는 손상되면 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 damage = document.getElementById ( "Doom-damage");

함수 doomtakedAmage () {
  DAMES.CLASSLIST.ADD ( "DO-DAMAGE");
  settimeout (() => {
    DAMES.CLASSLIST.REMOVE ( "DO-DAMAGE");
  }, 400);
}

.do-damage 클래스는 CSS 애니메이션을 적용합니다.

 .do-damage {
  배경색 : 빨간색;
  애니메이션 : 0.4S Doom-Damage Forwards;
}

@keyframes doom-damage {
  0% {불투명도 : 1; }
  100% {불투명도 : 0; }
}

이것은 즉각적인 빨간색 플래시와 부드러운 페이드 아웃을 만듭니다.

퍼즐의 마지막 부분 (여기에는 표시되지 않지만 링크 된 코드펜에 포함)에는 특정 스크롤 간격에서 doomTakeDamage() 호출하는 스크롤 이벤트 리스너가 포함되어 동적 "Doom 스크롤"효과를 만듭니다. 전체 코드는 제공된 CodePen에서 전체 구현을 위해 사용할 수 있습니다.

위 내용은 스크롤의 운명 손상 플래시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!