FVS 이미지 빙글빙글 돌리기 스크립트¶

"use document";
setTimeout(() => {

    const logo = document.querySelector('[data-name^="투명로고"]');
logo.style.position = "absolute";  // 이미지를 페이지 내에서 절대 위치로 설정
logo.style.transformOrigin = "center";  // 회전 기준을 중앙으로 설정
logo.style.top = "50%";  // 상단 위치 설정 (중앙 맞추기)
logo.style.left = "50%";  // 좌측 위치 설정 (중앙 맞추기)
logo.style.transform = "translate(-50%, -50%)";

    const images = document.querySelectorAll('[data-name^="이미지"]');

    // 각 이미지에 대해 회전 애니메이션 적용
    images.forEach((image) => {
        let rotation = 0; // 초기 회전 각도
        // 스타일 설정: 이미지가 제자리에서 회전하도록 하기 위해 스타일을 설정합니다.
image.style.position = "absolute";  // 이미지를 페이지 내에서 절대 위치로 설정
image.style.transformOrigin = "center";  // 회전 기준을 중앙으로 설정
image.style.top = "50%";  // 상단 위치 설정 (중앙 맞추기)
image.style.left = "50%";  // 좌측 위치 설정 (중앙 맞추기)
image.style.transform = "translate(-50%, -50%)";      // 정확한 중앙 위치를 맞추기 위한 트랜스폼

        // 애니메이션을 계속 반복하도록 하는 함수
        function animate() {
            rotation += 0.5; // 매 프레임마다 0.5도씩 회전
image.style.transform = `translate(-50%, -50%) rotate(${rotation}deg)`; // 회전 적용

            // 브라우저가 다음 프레임을 준비하도록 함
            requestAnimationFrame(animate);
        }

        // 애니메이션 시작
        animate();
    });

}, 500);