[JS30] - 22) Follow Along Link Highlighters

🧲 하이라이터 만들기

const highlight = document.createElement('span');
highlight.classList.add('highlight');
document.body.append(highlight);

하얀색 하이라이터로 쓸 도형을 만들어준다.

🧲 하이라이터 크기, 위치 조정하기

const triggers = document.querySelectorAll('a');
triggers.forEach(a => a.addEventListener('mouseenter', highlightLink))

a 태그를 모두 가져와 mouse가 위로 올라가면 발생하는 이벤트를 등록한다.

getBoundingClientRect()

function highlightLink() {
  const linkCoords = this.getBoundingClientRect();
  const coords = {
    width: linkCoords.width,
    height: linkCoords.height,
    top: linkCoords.top + window.scrollY,
    left: linkCoords.left + window.scrollX
  };

  highlight.style.width = `${coords.width}px`;
  highlight.style.height = `${coords.height}px`;
  highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
}

마우스가 올라간 a태그의 크기를 받아와 하이라이터의 크기를 똑같이 지정한다.

마우스 스크롤 시 영역 벗어나는 문제

  const coords = {
    top: linkCoords.top + window.scrollY,
    left: linkCoords.left + window.scrollX
  };

  highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
}

스크롤한 만큼 하이라이터를 내리고 왼쪽으로 옮겨주어야 한다.