hello skin 에서 마우스 오버 UI 구현하기

최근에 블로그의 UI를 조금 개선하는 작업을 했습니다.

많은 시간을 투자할 수 없어서 조금씩 고치고 있는데 마우스 오버기능을 넣고 싶었습니다.

제가 난독증이 있는 편이라 글을 드래그 하면서 읽거나 볼펜같은 사물로 글자를 집어가면서 읽는게 도움이 되더라구요.

그래서 제 블로그에는 마우스 오버기능을 넣어서 좀 더 글을 읽기 쉽게 만들고 싶었습니다.

뭐 대단한건 아니지만요.

 

이 기능이 필요하실분을 위해 코드를 공유합니다.

 

HTML

<div class="cursorItem">
      <span class="circle"></span>
    </div>

 

CSS

.cursorItem {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.6;
}

.cursorItem .circle {
  position: fixed;
  display: block;
  width: 20px;
  height: 20px;
  margin: -60px 0 0 -60px;
  background: black;
  border-radius: 50%;

}

 

JS

 <script type="text/javascript">

let cursorItem;
let circle;
let x = 0,
  y = 0;
let mx = 0,
  my = 0;

let mouse_y = 0;
window.onload = function () {


  cursorItem = document.querySelector(".cursorItem");
  circle = cursorItem.querySelector(".circle");

  window.addEventListener("scroll", function () {
    y = mouse_y + window.scrollY + 50;
    cursorItem.style.transform = "translate(" + x + "px, " + y + "px )";
  });
  window.addEventListener("mousemove", function (e) {
    x = e.clientX + 50;
    y = e.clientY + 50 + window.scrollY;
    mouse_y = e.clientY;

    cursorItem.style.transform = "translate(" + x + "px, " + y + "px )";
  });

  loop();
};

function loop() {
  mx += (x - mx) * 0.5;
  my += (y - my) * 0.5;
  cursorItem.style.transform = "translate(" + mx + "px, " + my + "px )";

  requestAnimationFrame(loop);
}

</script>

 

사용한 스킨

https://pronist.tistory.com/5

hELLO 티스토리 스킨을 소개합니다.