마법학교 컨셉을 따르기 위해 마우스를 마법 지팡이라고 설정해, 링크에 마우스를 올리면 LUMOS(루모스. 불을 밝히는 마법)로 변하는 애니메이션을 넣었습니다.

• 마우스 오버 전

• 마우스 오버 후

  lumos

  lumos

  
    <div class="cursor">
      <div class="link-wrap">
        <div class="cursor-rotate">
          <span class="eng">l</span><span class="eng">u</span
          ><span class="eng">m</span><span class="eng">o</span
          ><span class="eng">s</span>
        </div>
        <div class="cursor-rotate">
          <span class="eng">l</span><span class="eng">u</span
          ><span class="eng">m</span><span class="eng">o</span
          ><span class="eng">s</span>
        </div>
      </div>
    </div>
  

let mouseCursor = document.querySelector(".cursor");
  let link = document.querySelectorAll("a");
  let hoverLink = document.querySelectorAll(".hover-link");
  
  // 마우스가 움직일 때마다 div를 움직이게 함.
  window.addEventListener("mousemove", cursor);
  function cursor(e) {
    mouseCursor.style.left = e.pageX + "px";
    mouseCursor.style.top = e.pageY + "px";
  }
  
  // a 태그에 마우스를 가져다대면 'link-cursor'라는 클래스를 붙임
  link.forEach((link) => {
    link.addEventListener("mouseover", () => {
      mouseCursor.classList.add("link-cursor");
    });
  
    link.addEventListener("mouseleave", () => {
      mouseCursor.classList.remove("link-cursor");
    });
  });
  // '.hover-link' 라는 클래스를 가지고 있는 요소에 마우스를 가져다대면 'link-cursor'라는 클래스를 붙임
  hoverLink.forEach((hoverLink) => {
    hoverLink.addEventListener("mouseover", () => {
      mouseCursor.classList.add("link-cursor");
    });
    hoverLink.addEventListener("mouseleave", () => {
      mouseCursor.classList.remove("link-cursor");
    });
  });

'머로더즈 맵'을 실행하면 모든 사람들의 움직임을 알 수 있도록 '발자국'이 움직이는데, 그것을 로딩 페이지에 적용시켜 유저가 지도 안에서 실제로 움직이고 있다는 것처럼 느낄 수 있도록 표현하고 싶었습니다.

  
  <div class="loading">
    <div class="ani">
      <div class="rotate-wrap">
        <p class="rotate">
          <span>m</span><span>a</span><span>r</span><span>a</span
          ><span>u</span><span>d</span><span>e</span><span>r</span
          ><span>s</span>
        </p>
        <p class="rotate">
          <span>m</span><span>a</span><span>r</span><span>a</span
          ><span>u</span><span>d</span><span>e</span><span>r</span
          ><span>s</span>
        </p>
      </div>
    </div>
  </div>

  //css
  .ani {
    background: url("https://marautube.herokuapp.com/loading.png") no-repeat 0
      0;
    background-size: 1287px 127px;
    position: relative;
    z-index: 99999999;
    width: 127px;
    height: 127px;
    animation: loading 2000ms infinite steps(10);
  }
  @keyframes loading {
    100% {
      background-position: -1287px 0;
    }
  }
  

window.addEventListener("load", () => {
  body.classList.remove("before-load");
  document.querySelector(".loading").addEventListener("transitionend", (e) => {
    body.removeChild(e.currentTarget);
  });
});