魔法学校のコンセプトのため、マウスを魔法杖と設定し、リンクにマウスを上げると 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);
  });
});