reddit 구경중 매우 재밌어 보이는거 발견dit 구경중 매우 재밌어 보이는거 발견 > 자유게시판

• 목록

나도 만들고싶다

https://orion-overdrive.neocities.org/fun-stuff/webgardens

#########################################

<div id="quail"></div>

<script>

    const quail = document.getElementById('quail');

    let currentX = 0;

    let currentY = 0;

    let targetX = 0;

    let targetY = 0;

    // 마우스 위치 업데이트

    document.addEventListener('mousemove', (e) => {

        targetX = e.clientX - quail.offsetWidth / 2;

        targetY = e.clientY - quail.offsetHeight / 2;

    });

    // 메추리를 부드럽게 움직이는 애니메이션 함수

    function animate() {

        // 이동 속도를 조절하여 부드럽게 움직이도록 함 (값이 낮을수록 더 천천히 움직임)

        currentX += (targetX - currentX) * 0.01;

        currentY += (targetY - currentY) * 0.01;

        quail.style.left = `${currentX}px`;

        quail.style.top = `${currentY}px`;

        window.requestAnimationFrame(animate);

    }

    // 애니메이션 시작

    animate();

</script>

<style>

    #quail {

        position: fixed; /* absolute -> fixed로 변경하여 화면 전체를 기준으로 위치 지정 */

        background-image: url('/theme/community/img/resized_quail_logo.png');

        background-size: cover;

        pointer-events: none;

        animation: flap 0.5s infinite alternate;

        z-index: 9999;

        width: 40px; /* 메추리 크기를 작게 고정 */

        height: 40px;

    }

    @keyframes flap {

        0% { transform: rotate(10deg); }

        100% { transform: rotate(-10deg); }

    }

</style>