<ul>
  <li><span class="chaser"><a href="#">HOME</a></span></li>
  <li><span class="chaser"><a href="#">ABOUT</a></span></li>
  <li><span class="chaser"><a href="#">WORKS</a></span></li>
  <li><span class="chaser"><a href="#">NEWS</a></span></li>
  <li><span class="chaser"><a href="#">CONTACT</a></span></li>
</ul>

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  min-height: 100vh;
  font-family: "Rubik", "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background-color: #37474f;
  background-image: -webkit-radial-gradient(
    farthest-side ellipse at right bottom,
    #114255,
    #000
  );
  background-image: radial-gradient(
    farthest-side ellipse at right bottom,
    #114255,
    #000
  );
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  overflow-x: hidden;
}
ul {
  padding: 32px 0;
  width: 100%;
  font-size: 0;
}
ul > li {
  display: inline-block;
  width: 20%;
}
ul > li > span {
  width: 20%;
  text-align: center;
  font-size: 0.8rem;
  position: absolute;
}
ul > li > span > a {
  padding: 16px;
  color: #fff;
  text-decoration: none;
  transition: background 0.8s, border-radius 1.2s, color 0.8s;
}
ul > li > span > a:hover {
  color: #000;
  background: #fff;
  border-radius: 16px;
}
@media (min-width: 500px) {
  span {
    font-size: 1rem;
  }
}

(function () {
  "use strict";
  window.addEventListener(
    "DOMContentLoaded",
    function () {
      let chasers = document.getElementsByClassName("chaser");
      let initDatas, chasersDatas, mouseX, mouseY, ww, point;

      function init() {
        ww = window.innerWidth;
        point = ww < 600 ? 50 : 80;
        initDatas = [];
        for (let i = 0; i < chasers.length; i++) {
          let d = chasers[i].getBoundingClientRect();
          initDatas.push(d);
        }
      }

      function closeTarget(i, dx, dy, dist) {
        let vx = dx / 10;
        let vy = dy / 10;
        chasers[i].style.left = chasersDatas[i].left + vx + "px";
        chasers[i].style.top = chasersDatas[i].top + vy + "px";
      }

      function returnTarget(i, idx, idy, idist) {
        let vx = idx / 1;
        let vy = idy / 1;
        chasers[i].style.left = chasersDatas[i].left + vx + "px";
        chasers[i].style.top = chasersDatas[i].top + vy + "px";
      }

      function calcDist(x, y) {
        chasersDatas = [];
        for (let i = 0; i < chasers.length; i++) {
          let d = chasers[i].getBoundingClientRect();
          chasersDatas.push(d);
        }
        for (let i = 0; i < chasersDatas.length; i++) {
          let dx = mouseX - (chasersDatas[i].left + chasersDatas[i].width / 2);
          let dy = mouseY - (chasersDatas[i].top + chasersDatas[i].height / 2);
          let dist = Math.sqrt(dx * dx + dy * dy);
          let idx =
            initDatas[i].left +
            initDatas[i].width / 2 -
            (chasersDatas[i].left + chasersDatas[i].width / 2);
          let idy =
            initDatas[i].top +
            initDatas[i].height / 2 -
            (chasersDatas[i].top + chasersDatas[i].height / 2);
          let idist = Math.sqrt(idx * idx + idy * idy);
          if (dist < point && idist < point) {
            closeTarget(i, dx, dy, dist);
          } else {
            returnTarget(i, idx, idy, idist);
          }
        }
      }

      init();

      window.addEventListener(
        "mousemove",
        function (e) {
          mouseX = e.clientX;
          mouseY = e.clientY;
          calcDist(mouseX, mouseY);
        },
        false
      );

      window.addEventListener(
        "resize",
        function () {
          for (let i = 0; i < chasers.length; i++) {
            chasers[i].style.left = i * 20 + "%";
          }
          init();
        },
        false
      );

      window.addEventListener(
        "touchmove",
        function (e) {
          let touch = e.targetTouches[0];
          mouseX = touch.pageX;
          mouseY = touch.pageY;
          calcDist(mouseX, mouseY);
        },
        false
      );
    },
    false
  );
})();