자바스크립트로 360도 이미지 회전 애니메이션 만들기

18 Oct 2023

javascript

이번 포스트에서는 자바스크립트를 사용하여 360도 이미지 회전 애니메이션을 만드는 방법에 대해 알아보겠습니다.

1. HTML 구조 설정하기

먼저 HTML 파일을 열고 다음과 같이 구조를 설정해야 합니다.

<!DOCTYPE html>
<html>
<head>
    <title>360도 이미지 회전 애니메이션</title>
    <style>
        #image-container {
            width: 500px;
            height: 500px;
            position: relative;
            overflow: hidden;
        }
        
        #image {
            position: absolute;
            transition: transform 0.5s ease-in-out;
        }
    </style>
</head>
<body>
    <div id="image-container">
        <img id="image" src="path/to/image.jpg" alt="360도 이미지">
    </div>
    
    <script src="path/to/script.js"></script>
</body>
</html>

위의 코드에서는 이미지를 담을 image-container라는 div 요소를 생성하고, 그 안에 <img> 요소를 추가합니다.

2. 자바스크립트를 이용한 이미지 회전 구현

이제 자바스크립트 파일을 생성하고 다음 코드를 추가해봅시다.

const imageContainer = document.getElementById('image-container');
const image = document.getElementById('image');

let rotation = 0;

imageContainer.addEventListener('mousemove', (event) => {
    const containerWidth = imageContainer.offsetWidth;
    const containerCenter = containerWidth / 2;
    const mouseX = event.clientX;
    
    const rotationSpeed = 0.5; // 회전 속도 조절
    
    rotation = (mouseX - containerCenter) * rotationSpeed;
    
    image.style.transform = `rotateY(${rotation}deg)`;
});

위의 코드는 mousemove 이벤트를 리스닝하여 마우스의 위치에 따라 이미지가 회전하도록 구현합니다. 회전 속도를 조절하기 위해 rotationSpeed 변수를 조정할 수 있습니다.

3. 실행 및 결과 확인

이제 HTML 파일을 브라우저에서 열어서 실행해보면 마우스를 움직일 때 이미지가 회전하는 것을 볼 수 있습니다. 이미지의 경로와 크기는 실제 이미지에 맞게 수정해주시기 바랍니다.

마무리

이번 포스트에서는 자바스크립트를 이용하여 360도 이미지 회전 애니메이션을 만드는 방법에 대해 알아보았습니다. 이를 활용하면 웹페이지나 앱에서 다양한 상품 또는 컨텐츠의 회전 이미지를 구현할 수 있습니다.

#javascript #이미지회전