JAVA : 마우스를 피해 도망가는 이미지 효과 (마우스 감지해서 도망가기)

아하! 마우스 위치에 따라 자유롭게 도망가는 효과를 만들려면 JavaScript가 필요합니다. 마우스 위치를 감지해서 반대 방향으로 도망가게 만들어볼게요!

<h1>안녕하세요!</h1>
<p>저는 [당신의 이름]입니다.</p>
<p>웹 개발을 배우고 있어요.</p>
<div id="runaway-container" class="hex-container">
    <div class="hex-border"></div>
    <img src="https://cdn.pixabay.com/photo/2014/12/21/23/57/diamond-576838_1280.png" alt="다이아몬드 이미지">
</div>
<button>클릭하세요!</button>

<script>
const container = document.getElementById('runaway-container');
const maxDistance = 100; // 최대 도망가는 거리

document.addEventListener('mousemove', (e) => {
    const rect = container.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;

    // 마우스와 이미지 중심 사이의 거리 계산
    const deltaX = e.clientX - centerX;
    const deltaY = e.clientY - centerY;
    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

    // 마우스가 가까이 오면 도망가기
    if (distance < 200) {  // 200px 반경 내에 마우스가 오면
        // 마우스 반대 방향으로 도망가기
        const moveX = (centerX - e.clientX) / distance * maxDistance;
        const moveY = (centerY - e.clientY) / distance * maxDistance;

        container.style.transform = `translate(${moveX}px, ${moveY}px)`;
    }
});
</script>

CSS는 조금 수정해줍니다:

.hex-container {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 100px auto;
    transition: all 0.1s ease;  /* 움직임을 더 빠르게 */
}

/* 나머지 CSS는 동일 */

이제:

1. 마우스가 이미지 주변 200px 반경 안에 들어오면
2. 마우스 위치의 반대 방향으로 도망가고
3. 마우스가 멀어지면 다시 원래 위치로 돌아옵니다

어떠신가요? 이 방식이 더 재미있게 느껴지시나요?

조절할 수 있는 값들:

• maxDistance: 도망가는 최대 거리
• 200: 마우스를 감지하는 반경
• transition 시간: 움직임의 속도

이 값들을 조절해서 원하시는 효과를 만들 수 있습니다!

아하! 좋은 지적이에요. CodePen은 HTML, CSS, JavaScript를 각각 다른 섹션에서 관리할 수 있게 해줍니다.

제가 다시 정리해서 알려드릴게요. CodePen에서는 이렇게 나눠서 입력하시면 됩니다:

HTML 섹션:

<h1>안녕하세요!</h1>
<p>저는 [당신의 이름]입니다.</p>
<p>웹 개발을 배우고 있어요.</p>
<div id="runaway-container" class="hex-container">
    <div class="hex-border"></div>
    <img src="https://cdn.pixabay.com/photo/2014/12/21/23/57/diamond-576838_1280.png" alt="다이아몬드 이미지">
</div>
<button>클릭하세요!</button>

CSS 섹션:

.hex-container {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 100px auto;
    transition: all 0.1s ease;
}

.hex-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

img {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    object-fit: cover;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 1;
}

JavaScript 섹션:

const container = document.getElementById('runaway-container');
const maxDistance = 100;

document.addEventListener('mousemove', (e) => {
    const rect = container.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;

    const deltaX = e.clientX - centerX;
    const deltaY = e.clientY - centerY;
    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

    if (distance < 200) {
        const moveX = (centerX - e.clientX) / distance * maxDistance;
        const moveY = (centerY - e.clientY) / distance * maxDistance;

        container.style.transform = `translate(${moveX}px, ${moveY}px)`;
    }
});

이렇게 각 섹션에 맞는 코드를 넣으면:

1. 코드가 더 깔끔하게 정리되고
2. 각 언어의 문법 하이라이팅이 제대로 적용되며
3. 디버깅도 더 쉬워집니다

CodePen의 각 섹션을 이렇게 사용하는 게 올바른 방법이에요!