-
[JS] 마우스 움직임을 추적하여 커서를 바꿔보자Javascript 2023. 3. 27. 14:23
.html
<body> <h1>x : <span id="x"></span> , y : <span id="y"></span> </h1> <div id="cursor"></div> <script> var x = document.querySelector("#x"); var y = document.querySelector("#y"); var cursor = document.querySelector("#cursor"); window.addEventListener("mousemove", (e) => { x.innerHTML = e.clientX; y.innerHTML = e.clientY; cursor.style.transform = "translate(" + (e.clientX - 25) + "px, " + (e.clientY - 25) + "px)"; // cursor.style.top = (e.clientY - 15) + "px"; // cursor.style.left = (e.clientX - 15) + "px"; }); </script> </body>.css
body { cursor: none; } #cursor { width: 50px; height: 50px; background-color: cadetblue; position: absolute; top: 0; left: 0; border-radius: 50%; opacity: 30%; }브라우저가 웹페이지에 그리는 순서
1. dom-tree
2. layout : width, height, position ...
3. paint : color ...
4. composite : transform ...top, left등을 통해 UI를 변경하는 방법보다는 transform을 사용하는 것이 훨씬 더 효율적이다.
hover 발생 시 width를 수정하면, paint, composite 전부 수정이 되며, 위에서부터 아래로 브라우저가 재렌더링 된다.
대부분의 상황에서는 transform을 사용하는 것이 훨씬 더 빠르고, 웹페이지에 부담도 덜하다.
'Javascript' 카테고리의 다른 글
[JS] 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression) (0) 2023.04.20 [JS] 호이스팅(hoisting) (0) 2023.04.20 [JS] 자주 사용하는 배열 내장 함수 (0) 2023.04.20 [JS] 객체(Object) [생성/프로퍼티/인스턴스] (0) 2023.04.20 [JS] 나머지 매개변수(rest parameter) (0) 2023.04.19