초간단 마우스를 따라 다니는 요소 구현하기 - 자바스크립트(Java Script)

원숭이는 바나나를 사랑해

 

언젠가 누군가의 티스토리에 들어갔는데 마우스를 움직일 때마다 뭔가가 마우스를 따라 온다거나, 꽃가루 같은 것을 뿌리는 것을 경험한 적이 있다.

그걸 구현하고 싶었다.

---

코드 실행

 

See the Pen Monkey Follow by Wi daehyeon (@widaehyeon) on CodePen.

---

HTML 코드

<div class="container">
    <div class="box" id="box">
        <div class="monkey" id="monkey">🐒</div>
    </div>
</div>

---

CSS 코드

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
}

.box {
    width: 300px;
    height: 300px;
    background-color: white;
    border: 2px solid #333;
    position: relative;
    overflow: hidden;
}

.monkey {
    position: absolute;
    font-size: 2rem;
    transition: top 0.2s ease, left 0.2s ease;
}

.banana {
    position: absolute;
    font-size: 1.5rem;
    opacity: 1;
    transition: opacity 1s ease;
}

.banana.fade-out {
    opacity: 0;
}

---

Java Script 코드

document.addEventListener('DOMContentLoaded', function() {
    const box = document.getElementById('box');
    const monkey = document.getElementById('monkey');

    box.addEventListener('mousemove', function(event) {
        const boxRect = box.getBoundingClientRect();
        const mouseX = event.clientX - boxRect.left;
        const mouseY = event.clientY - boxRect.top;

        monkey.style.left = `${mouseX - monkey.offsetWidth / 2}px`;
        monkey.style.top = `${mouseY - monkey.offsetHeight / 2}px`;
    });

    setInterval(createBanana, 100); // 0.1초 간격으로 바나나 생성

    function createBanana() {
        const banana = document.createElement('div');
        banana.classList.add('banana');
        banana.textContent = '🍌';

        const monkeyRect = monkey.getBoundingClientRect();
        const boxRect = box.getBoundingClientRect();
        const x = monkeyRect.left - boxRect.left + monkey.offsetWidth / 2 - 10;
        const y = monkeyRect.top - boxRect.top + monkey.offsetHeight / 2 - 10;

        banana.style.left = `${x}px`;
        banana.style.top = `${y}px`;

        box.appendChild(banana);

        // 3초 후 바나나를 부드럽게 사라지게 함
        setTimeout(() => {
            banana.classList.add('fade-out');
            setTimeout(() => {
                banana.remove();
            }, 1000); // fade-out 애니메이션 시간과 동일하게 설정
        }, 3000);
    }
});

1) addEventListener('mousemove', function(event){}

`console.log(event);`를 해보면 마우스를 살짝만 움직여도 무수히 많은 `MouseEvent`가 콘솔에 찍히는 것을 볼 수 있다.

MouseEvent 인터페이스에서 `clientX` 와 `clientY`를 사용할 것이다.

 

clientX : 이벤트가 발생한 viewport 내에 수평 좌표

clientY : 이벤트가 발생한 viewport 내에 수직 좌표

offsetWidth : 요소의 가로 크기

offsetHeight : 요소의 세로 크기

 

이렇게 4가지 요소를 이용해서 마우스 위치에 원숭이를 계속해서 이동시켜준다.

 

2) setInterval(createBanana, 100);

`setInterval`을 이용해 createBanan함수를 100ms마다 실행시킨다.

원숭이는 0.1초마다 바나나를 떨어트리게 된다.

3) createBanana()

원숭이가 있는 위치에 바나나 요소를 추가한다.

바나나가 무한정 떨어지면 화면이 너무 지저분하고 성능적으로 문제가 생길 것 같아

`setTimeout()`을 활용해 바나나를 3초 뒤에 사라지게 만들었다.

 

`fade-out` class를 추가해 요소가 투명하게,

`transition` 속성을 사용해 바나나가 천천히 투명해지게 만들었다.

 

바나나는 3초 룰을 지키며 소멸한다...

---

 

끝!