커서 & bgm 자동재생 가이드

먼저 스킨 편집의 html에서, 함께 첨부해드린 html 파일로 내용을 교체해주세요!

최하단의 </body> 태그 직전에 아래 내용이 삽입되었습니다

/* ------ 커서 및 오디오 관련 편집 ------ */
/* "https://tistory1.daumcdn.net/tistory/4298132/skin"으로 되어있는 링크를 */
/* 본인 티스토리 링크로 바꿔 주세요! */

<div id="custom-cursor"></div>
<audio id="bgm" loop>
  <source src="https://tistory1.daumcdn.net/tistory/4298132/skin/images/Sugar Rush.mp3" type="audio/mpeg">
</audio>

<style>
/* 기본 커서 숨기기 */
*, *::before, *::after {
  cursor: none !important;
}
body, html {
  cursor: none !important;
}

/* 커서 스타일 */
#custom-cursor {
  position: fixed;
  width: 32px;
  height: 32px;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  background-size: contain;
  background-repeat: no-repeat;
}
</style>

<script>
// 애니메이션 마우스 커서
(function() {
  const cursor = document.getElementById('custom-cursor');
  const frames = [
    'https://tistory1.daumcdn.net/tistory/4298132/skin/images/frame01.png',
    'https://tistory1.daumcdn.net/tistory/4298132/skin/images/frame02.png',
    'https://tistory1.daumcdn.net/tistory/4298132/skin/images/frame03.png',
    'https://tistory1.daumcdn.net/tistory/4298132/skin/images/frame04.png',
    'https://tistory1.daumcdn.net/tistory/4298132/skin/images/frame05.png',
    'https://tistory1.daumcdn.net/tistory/4298132/skin/images/frame06.png',
    'https://tistory1.daumcdn.net/tistory/4298132/skin/images/frame07.png',
    'https://tistory1.daumcdn.net/tistory/4298132/skin/images/frame08.png'
  ];

  let currentFrame = 0;

  // 마우스 위치 추적
  document.addEventListener('mousemove', (e) => {
    cursor.style.left = e.clientX + 'px';
    cursor.style.top = e.clientY + 'px';
  });

  // 프레임 애니메이션
  setInterval(() => {
    cursor.style.backgroundImage = `url(${frames[currentFrame]})`;
    currentFrame = (currentFrame + 1) % frames.length;
  }, 100); // 100ms마다 <- 더 느리게 하거나 빠르게 하고 싶다면 이 부분을 만져 주세요
})();
</script>

<script>
// 배경음악 자동재생
(function() {
  const audio = document.getElementById('bgm');
  audio.volume = 0.3; // 기본 볼륨 30% <- 더 키우거나 줄이고 싶다면 이 부분을 만져 주세요
  let played = false;

  function playAudio() {
    if (!played) {
      audio.play().then(() => {
        played = true;
        console.log('배경음악 재생 시작');
      }).catch(err => {
        console.log('재생 실패:', err);
      });
    }
  }

  // 사용자 인터랙션 감지
  const events = ['click', 'scroll', 'keydown', 'touchstart', 'mousemove'];

  events.forEach(event => {
    document.addEventListener(event, playAudio, { once: true });
  });
})();
</script>

 

이후 파일 업로드 섹션으로 넘어가주세요. 추가 버튼을 눌러 업로드용 zip 속의 내용물(frame01~08.png, mp3 파일)을 전부 추가해주세요.

업로드 이후, 해당 파일에 '마우스 오버 후 우클릭 → 링크 주소 복사'를 통해 주소를 복사해주세요.

 

다시 html 편집으로 돌아갑니다. 위에서 얻은 링크로, https://tistory1.daumcdn.net/tistory/4298132/skin 부분의 링크를 대체해주세요. 이후 저장하면 커서와 bgm이 전부 적용됨을 확인할 수 있습니다!