Javascript30. 22 - Follow Along Link Highlighter
2020-02-07
Javascript30
정리: Javascript30을 공부한 내용 기록
22 - Follow Along Link Highlighter
목표
요구사항
- anchor에 마우스 커서를 감지하여 반응형 CSS를 구현한다.
필요기술
- Javascript.
배운 것
Javascript
getBoundingClientRect
getBoundingClientRect는 DOM Element의 위치를 구할 떄 사용한다.
// ...
const highlightLink = (event) => {
const linkCoords = event.getBoundingClientRect();
const coords = {
width: linkCoords.width,
height: linkCoords.height,
top: linkCoords.top + window.scrollY,
left: linkCoords.left + window.scrollX,
};
// ...참조
참조용 전체 코드.
const targets = document.querySelectorAll('a');
const highlight = document.createElement('span');
highlight.classList.add('highlight');
document.body.appendChild(highlight);
const highlightLink = (event) => {
const linkCoords = event.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)`;
};
targets.forEach((a) =>
a.addEventListener('mouseenter', () => highlightLink(a))
);👋
