HTML
<body class="chapter-10">
<div class="followAnimation">
👻
</div>
</body>
CSS
.followAnimation {
position: fixed;
top: 0;
left: 0;
will-change: transform;
font-size: 5rem;
border: 1px solid #ccc;
transition: all 0.2s linear;
}
Javascript
// const ghost = document.querySelector(".followAnimation");
// document.addEventListener("mousemove", (e) => {
// let mouseX = e.clientX;
// let mouseY = e.clientY;
// ghost.style.left = mouseX + "px";
// ghost.style.top = mouseY + "px";
// })
const el = document.querySelector(".followAnimation");
let mouseX = 0;
let mouseY = 0;
let currentX = 0;
let currentY = 0;
document.body.addEventListener("mousemove", (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
function tick() {
currentX = mouseX;
currentY = mouseY;
el.style.transform = `translate(${currentX}px, ${currentY}px)`;
requestAnimationFrame(tick);
};
tick();'Javascript > GMA(2302~)' 카테고리의 다른 글
| 230608 자바스크립트 예제 -사용자로부터 받은 문자열에서 숫자만 출력하기 (0) | 2023.06.08 |
|---|---|
| 230608 자바스크립트 객체 오름차순, 내림차순 정렬 (0) | 2023.06.08 |
| 230607 자바스크립트 animationstart / animationiteration 이벤트 (0) | 2023.06.07 |
| 230607 자바스크립트 옵션태그활용 , forEach( ), 배열객체 출력하기 (0) | 2023.06.07 |
| 230602 자바스크립트 배열객체 forEach로 출력하기 (0) | 2023.06.02 |
