자바스크립트 애니메이션 프레임을 활용한 카드 플립 애니메이션 구현하기

18 Oct 2023

javascript

카드 플립은 웹 페이지에서 많이 사용되는 인터랙티브한 애니메이션 중 하나입니다. 이번 튜토리얼에서는 자바스크립트의 애니메이션 프레임을 활용하여 간단한 카드 플립 애니메이션을 구현해 보겠습니다.

준비물

이 튜토리얼에서는 HTML, CSS, 자바스크립트를 사용합니다. Code editor와 브라우저가 필요합니다. 프로젝트를 시작하기 전에 아래의 준비물을 확인해 주세요.

HTML 파일
CSS 파일
JavaScript 파일

기본 HTML 구조 설정하기

먼저, HTML 파일을 열고 기본적인 구조를 설정해야 합니다. 아래와 같은 코드를 작성해 주세요.

<!DOCTYPE html>
<html>
<head>
    <title>카드 플립 애니메이션</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="card">
        <div class="front">
            <h2>앞면</h2>
        </div>
        <div class="back">
            <h2>뒷면</h2>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

위의 코드에서는 .card라는 클래스로 둘러싸인 앞면과 뒷면을 가지는 div 요소를 생성했습니다. 이 div 요소들은 카드 한 장을 대표하며, 앞면과 뒷면에는 텍스트로 “앞면”과 “뒷면”을 표시하도록 설정했습니다.

CSS로 스타일 설정하기

이제 CSS 파일을 열고 스타일을 설정해 주세요. 아래 코드를 CSS 파일에 작성해 주세요.

.card {
    width: 200px;
    height: 300px;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.front, .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.6s;
}

.front {
    background-color: blue;
    color: white;
    transform: rotateY(0deg);
}

.back {
    background-color: red;
    color: white;
    transform: rotateY(180deg);
}

CSS 코드에서는 .card 클래스의 너비와 높이를 설정하고, 3D perspective를 활용해 카드가 뒤집히는 애니메이션 효과를 보여줄 수 있도록 설정해주었습니다. front와 back 클래스는 각각 앞면과 뒷면의 스타일을 정의하며, transition 속성을 활용해 애니메이션 시간을 설정해주었습니다.

자바스크립트로 애니메이션 제어하기

마지막으로, JavaScript 파일을 열고 애니메이션을 제어하는 코드를 작성해 주세요. 아래 코드를 JavaScript 파일에 작성해 주세요.

const card = document.querySelector('.card');
let isFlipped = false;

card.addEventListener('click', function() {
    if (!isFlipped) {
        card.style.transform = 'rotateY(180deg)';
    } else {
        card.style.transform = 'rotateY(0deg)';
    }

    isFlipped = !isFlipped;
});

위의 JavaScript 코드는 .card 클래스를 가지는 요소를 선택하고, 클릭 이벤트를 감지하여 카드를 뒤집는 기능을 구현합니다. isFlipped 변수를 활용하여 카드의 현재 상태를 추적하고, 클릭 이벤트가 발생할 때마다 앞면과 뒷면이 번갈아가며 보여지도록 설정해줍니다.

결과 확인하기

이제 준비가 끝났습니다. 웹 브라우저에서 HTML 파일을 열고 카드를 클릭해 보세요. 앞면과 뒷면이 번갈아가며 플립되는 애니메이션을 확인할 수 있을 것입니다.

이 튜토리얼에서는 자바스크립트의 애니메이션 프레임을 활용하여 간단한 카드 플립 애니메이션을 구현해 보았습니다. 이를 활용하여 웹 프로젝트에 다양한 인터랙티브한 애니메이션을 구현할 수 있습니다.

준비물

기본 HTML 구조 설정하기

CSS로 스타일 설정하기

자바스크립트로 애니메이션 제어하기

결과 확인하기

참고 자료