자바스푸키: 자바스크립트를 사용하여 플래시플레이어 무덤에서 낡은 공포 인터넷 코미디를 부활시킨다.

그날로 돌아가자 어느 internet webcomic은 놀라운 전환으로 악명 높은 수준에 이르렀다.
그러나 이 만화의 충격적인 전환점은 Adobe Flash Player으로 2020년 12월 31일 인터넷에서 완전히 폐기될 것이다.
그래서 인터넷 역사의 일부분은 시대에 의해 잊혀졌다...
아니면 이렇게?(아래 링크에는 무서운 점프 공포가 포함되어 있음을 주의하세요)
https://thatspookycomic.github.io/
당신은 시도할 충분한 용기가 있습니까?나는 이 악명 높은 효과를 재구성하기 위해 vanilla JS, HTML, CSS, 그리고 새로운 학교 웹 API만 사용하기로 결정했다.위 페이지의 결과를 비교할 수 있습니다.

그게 어떻게 된 거예요?

깜짝 놀라는 소리

페이지 상단부터 시작합시다.페이지에서 클릭한 호박 이모티콘을 알아차렸을 수도 있겠지?

귀여운 할로윈 놀이로 보이죠?사실 그것은 험악한 목적을 숨기고 있다.
페이지에서 점프 공포 소음을 재생하기 위해 Audio이라는 웹 API를 사용했습니다.
현재 오디오 도구의 디자인은 웹 페이지를 열 때 자동으로 미디어를 재생하는 데 가져오는 번거로움을 방지하기 위해서이다.사용자가 문서와 상호 작용하지 않는 경우 사운드를 재생하려고 하면 다음과 같은 오류가 발생합니다.

그래서 우리로 하여금 비슷한 일을 하게 하기 위해서:

const spookySound = new Audio('audio/spooky-sound.mp3');
spookySound.play();

우리는 우선 사용자가 페이지의 어딘가를 클릭하도록 격려해야 한다.그래서 호박 이모티콘 onclick을 업데이트하기 위해 작은 JS를 넣었습니다.

<span id="clickEmoji" onclick="emojiClickChange()">🎃</span>

function emojiClickChange() {
  document.getElementById('clickEmoji').innerText = "👻";
}

우리는 지금 무서운 소리를 낼 준비를 하고 있다!

점프 공포 촉발

다음으로, 우리는 사용자가 언제 페이지의 어느 지점으로 굴러가는지 검사해야 하며, 거기에서 점프 공포 효과를 촉발해야 한다.
이를 위해 우리는 Intersection Observer API을 사용한다.
나는 두 장의 사진에서 id를 잃어버렸다. 나는 도약의 두려움을 이 두 장의 사진에서 일으키고 싶다.

<img src="images/7.jpg" id="firstTarget" />
...
<img src="images/17.jpg" id="secondTarget" />

그런 다음 관찰자를 만들고 이미지를 관찰합니다.

let observer = new IntersectionObserver(handler);
observer.observe(document.getElementById('firstTarget'));
observer.observe(document.getElementById('secondTarget'));

이제 우리는 관찰된 항목의 상태가 변화하면 이 함수를 호출할 수 있는 함수를 만들 수 있습니다!

function handler(entries) {
  for (entry of entries) {
    if (
      entry.target.id === 'firstTarget'
      && entry.isIntersecting
      && !firstJumpScareActivated
    ) {
      playFirstJumpScare();
    }
  }
}

관찰된 모든 항목이 상태를 바꾸면 handler 함수를 호출합니다.우리는 entry.target.id을 읽어서 우리가 처리하고 있는 프로젝트를 이해할 수 있습니다. isIntersecting은 사용자가 항목을 보기로 스크롤했는지 알 수 있습니다. 저는 블로XJumpScareActivated을 사용하여 효과가 한 번만 발생하도록 합니다.
마지막으로 그림의 불러오는 속도가 느리면, 페이지를 불러올 때, id가 프레임에 잠깐 있으면 이 효과를 촉발할 수 있습니다.이 문제를 해결하는 정확한 방법은 교차로 관찰기를 시작하기 전에 모든 그림을 불러오기를 기다리는 것입니다. 그러나 간단하게 보기 위해서 시간 초과를 설정하여 이 작업을 완성했습니다.

setTimeout(() => {
  observer.observe(document.getElementById('firstTarget'));
  observer.observe(document.getElementById('secondTarget'));
}, 3000)

다행이다. 사용자가 언제 목표 항목을 보기로 스크롤하는지 알 수 있고, 소리를 재생할 준비가 되어 있다.마지막으로, 우리는 빠른 스크롤 점프 효과를 만들어야 합니다!

자동 스크롤 사용자

이러한 도약 공포가 정상적으로 작동하기 위해서, 우리는 사용자가 소리를 재생하는 동시에 만화 프레임을 빠르게 굴리기를 바란다.이런 효과 중 가장 무서운 부분은 이런 사실에서 나온다. 사용자들은 만화의 리듬을 컨트롤할 수 있다고 생각하지만, 우리는 이러한 컨트롤에서 빨리 벗어나고 싶어 한다.
내가 그것을 구축하는 방법은 사용자가 스크롤하고 싶은 페이지의 모든 부분을 스크롤하고 개발 도구 컨트롤러에 window.scrollY을 입력하는 것이다.

이제 원하는 Y 좌표가 생겼습니다. 모든 Y 좌표에 시간 간격을 두고 스크롤 효과를 설정하기만 하면 됩니다.코드는 다음과 같습니다.

function playFirstJumpScare() {
  setTimeout(() => {
    clickSound.play();
    window.scrollTo(0, 8441);
  }, 800)

  setTimeout(() => {
    window.scrollTo(0, 9090);
  }, 900)

  setTimeout(() => {
    window.scrollTo(0, 9660);
  }, 1000)

  ...
}

향후 개선 사항은 모든 시간과 스크롤 위치를 하나의 객체에 넣고 매핑하는 것과 관련될 수 있습니다.

[
  {
    time: 800,
    scrollPos: 8441
  },
  ...
]

하지만 오늘은 할로윈이야. 이걸 발표해야 돼,stat!그래서 지금도 코드가 보기 싫다.
점프 공포를 활성화하면 부울 값을true로 설정하면 다시 발생하지 않습니다.

firstJumpScareActivated = true;

마지막으로 사이트를 온라인으로 만들기 위해 새로운 GitHub 계정을 만들고 GitHub Pages을 사용했습니다. 사이트 here의 전체 코드를 볼 수 있습니다.
나는 이것이 정보가 풍부하고 재미있기를 바란다. 가장 중요한 것은 무서운 것이다.10월의 마지막 밤, 당신의 모든 친구들과 이 만화를 마음대로 나누세요!할로윈 잘 보내세요!