그누보드 QA - 제스쳐 애니메이션? 어떤 구현법이 가능할까요?

제스쳐 애니메이션? 어떤 구현법이 가능할까요?

민주야 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2024.12.31 05:51:10 조회 544 (221.♡.♡.238)

본문

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=876935

이거처럼 마우스 오버시에 책이 각도로 돌아가는 입체표현을

어떤 방법으로 한걸까요? 아시는 고수님 도움 바랍니다.

3718405870_1735591840.2929.png

#애니메이션 #php

답변 2

glitter0gim 홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2024-12-31 15:00:41 115.♡.♡.228

"""책이 각도로 돌아가는 입체표현을

어떤 방법으로 한걸까요?"""

= 두 이미지로 앞면과 뒷면을 설정하여 3D 전환(입체 회전) 구현이 가능합니다.

이미지에 마우스 오버 시 "Original_image.png"에서 "Mouse_over_image.png"로 전환하는

애니메이션은 HTML과 CSS를 활용하여 간단히 구현할 수 있습니다.

HTML 코드에서는 <img> 태그에 두 이미지를 포함시키고,

CSS를 통해 :hover 속성을 사용하여 이미지 변경 효과를 정의합니다.

애니메이션 효과를 추가하려면 transition 속성을 활용하여 부드러운 전환이 가능합니다.

＊HTML 구조:

<div> 태그 안에 기본 이미지를 배치.

마우스 오버 시 대체 이미지를 활성화하도록 클래스 설정.

＊CSS 스타일링:

기본 이미지는 position: relative로 설정.

대체 이미지는 position: absolute와 opacity: 0으로 숨김 처리.

:hover 시 opacity를 1로 전환하며 transition 속성으로 애니메이션 효과 추가.

＊JavaScript(선택 사항):

더욱 복잡한 상호작용을 원할 경우 JavaScript로 동적 이미지 전환 구현.

※ 영카트의 경우 ;

＊skin/shop/basic/item.info.skin.php


<section id="sit_info">
    <div id="sit_tab">
        <ul class="tab_tit">
            ...
        </ul>
        <ul class="tab_con">
            <li id="sit_inf">
                <h2 class="contents_tit"><span>상품 정보</span></h2>
                <div class="image-container">
                    <div class="flip-card">
                        <div class="flip-card-inner">
                            <div class="flip-card-front">
                                <img src="/img/Original_image.png" alt="Original Image">
                            </div>
                            <div class="flip-card-back">
                                <img src="/img/Mouse_over_image.png" alt="Mouse Over Image">
                            </div>
                        </div>
                    </div>
                </div>
                ...
            </li>
            ...
        </ul>
    </div>
</section>

＊css/default_shop.css


.image-container {
    perspective: 1000px; /* 3D 효과를 위한 원근 추가 */
    width: 300px; /* 이미지 너비 */
    height: 300px; /* 이미지 높이 */
    overflow: hidden;
    position: relative;
}
.flip-card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d; /* 3D 공간 유지 */
    transition: transform 0.6s ease-in-out;
    position: relative;
}
.flip-card-inner {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
}
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* 뒷면 숨기기 */
}
.flip-card-front {
    background-color: #ffffff;
}
.flip-card-back {
    background-color: #ffffff;
    transform: rotateY(180deg); /* 뒤집힌 상태 */
}
.image-container:hover .flip-card {
    transform: rotateY(180deg); /* 마우스 오버 시 180도 회전 */
}

＊js/shop.list.js


document.addEventListener("DOMContentLoaded", function () {
    var flipCard = document.querySelector('.flip-card');
    flipCard.addEventListener('mouseover', function () {
        this.style.transform = 'rotateY(180deg)';
    });
    flipCard.addEventListener('mouseout', function () {
        this.style.transform = 'rotateY(0deg)';
    });
});