예전에는 특정 인터넷 웹툰이 놀라운 왜곡으로 인해 악명 높은 수준을 달성했습니다.

그러나 그 만화를 강화한 충격적인 트위스트는 2020 년 12 월 31 일에 인터넷에서 완전히 사용되지 않는 Adobe Flash Player로 작성되었습니다.

https://dev.to/nickgottschlich/javaspooky-using-javascript-to-revive-an-old-horror-webcomic-from-a-flashplayer-grave-4dgb

그리하여 인터넷 역사의 일부가 시대에 잃었습니다 ...

아니면? (주의하십시오, 아래 링크에는 으스스한 점프 공포가 포함되어 있습니다)

https://thatspookycomic.github.io/

시험해 볼만큼 용감 했습니까? 저는 새로운 학교 웹 API와 함께 바닐라 JS, HTML, CSS 만 사용하여 악명 높은 효과를 재현하기로 결정했습니다. 위 페이지의 결과를 원래 효과의 기록과 비교할 수 있습니다.

그래서 어떻게 되었습니까? 

점프 겁 소리 

페이지 상단부터 시작하겠습니다. 페이지에서 클릭하라는 호박 이모티콘을 보았을 것입니다.

귀엽고 순진한 할로윈 재미처럼 보이죠? 글쎄, 그것은 실제로 불길한 목적을 숨기고 있습니다.

페이지에서 점프 공포 소음을 재생하기 위해 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();
    }
  }
}

관찰 된 항목의 상태가 변경 될 때마다 핸들러 함수가 호출됩니다. entry.target.id를 읽고 우리가 다루는 항목을 알 수 있고, isIntersecting은 사용자가 항목을 보기로 스크롤 했는지 알 수 있으며, 부울 XJumpScareActivated를 사용하여 효과가 한 번만 발생하는지 확인할 수 있습니다.

마지막으로 이미지가 느리게 로드 되는 경우 페이지가 로드 될 때 ID가 잠시 프레임에 있으면 효과가 트리거 될 수 있습니다. 이 문제를 해결하는 올바른 방법은 교차 관찰자를 시작하기 전에 모든 이미지가 로드 될 때까지 기다리는 것이지만, 단순함을 위해 setTimeout이 작업을 수행했습니다.

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

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

사용자 주변 자동 스크롤 

이 점프 공포가 제대로 작동하려면 사운드를 재생하는 동안 사용자가 만화 프레임을 빠르게 스크롤 해야 합니다. 이 효과의 가장 무서운 부분은 사용자가 자신이 만화의 속도를 제어 할 수 있다고 생각하고 그 제어를 빠르게 떼어 내고 싶다는 사실에서 비롯됩니다.

내가 만든 방법은 사용자를 스크롤 하려는 페이지의 각 부분으로 스크롤하고 개발 도구 콘솔에서 window.scrollY를 입력하는 것입니다.

이제 원하는 Y 좌표를 얻었으므로 각 Y 좌표의 setTimeout 간격으로 스크롤 효과를 트리거 합니다. 코드는 다음과 같습니다.

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
  },
  ...
]

하지만 오늘은 벌써 할로윈이고 이걸 공개해야 했어요, 스탯! 따라서 지금은 코드가 보기 흉합니다.

점프 겁을 활성화하면 다시 발생하지 않도록 부울을 true로 설정합니다.

firstJumpScareActivated = true;

마지막으로 웹 사이트를 온라인으로 연결하기 위해 새 GitHub 계정을 만들고 GitHub 페이지를 사용했습니다. 여기에서 웹 사이트의 전체 코드를 볼 수 있습니다.