Coverflow

Reactive API의 indexProgress를 사용하여 앨범 아트 스타일의 커버플로우 인터페이스를 구현하는 3D 회전 및 스케일링 효과를 적용합니다.

JavaScript

import Flicking, { connectFlickingReactiveAPI } from "@egjs/flicking";
import "@egjs/flicking/dist/flicking.css";
import "./styles.css";

// Capture panel references BEFORE Flicking init (circular mode may modify DOM)
const panels = document.querySelectorAll(".flicking-panel");
const LENGTH = 5;

const flicking = new Flicking("#flick", {
  circular: true,
  align: "center"
});
const reactiveAPI = connectFlickingReactiveAPI(flicking);

const update = value => {
  panels.forEach((panel, index) => {
    const childProgress = ((index - value + LENGTH * 1.5) % LENGTH) - LENGTH * 0.5;
    const scale = Math.max(0, 0.9 - Math.abs(childProgress) * 0.2);

    panel.style.transformOrigin = `${50 - childProgress * 50}% 50%`;
    panel.style.transform = `rotateY(${-childProgress * 50}deg) scale(${scale})`;
  });
};

// Apply initial state and subscribe to changes
update(reactiveAPI.indexProgress);
reactiveAPI.subscribe("indexProgress", update);

Open Sandbox

React

import Flicking, { useFlickingReactiveAPI } from "@egjs/react-flicking";
import React from "react";
import "@egjs/react-flicking/dist/flicking.css";
import "./styles.css";

const COLORS = ["#3498db", "#e74c3c", "#2ecc71", "#9b59b6", "#f39c12"];
const LENGTH = 5;

export default function App() {
  const flickingRef = React.useRef(null);
  const { indexProgress } = useFlickingReactiveAPI(flickingRef);

  return (
    <Flicking ref={flickingRef} circular={true} align="center" className="flicking-coverflow">
      {[0, 1, 2, 3, 4].map(index => {
        const childProgress = ((index - indexProgress + LENGTH * 1.5) % LENGTH) - LENGTH * 0.5;
        const scale = Math.max(0, 0.9 - Math.abs(childProgress) * 0.2);

        return (
          <div
            key={index}
            className="flicking-panel"
            style={{
              backgroundColor: COLORS[index % COLORS.length],
              transformOrigin: `${50 - childProgress * 50}% 50%`,
              transform: `rotateY(${-childProgress * 50}deg) scale(${scale})`
            }}
          >
            {index + 1}
          </div>
        );
      })}
    </Flicking>
  );
}

Open Sandbox

Vue@3

<script setup>
import Flicking, { useFlickingReactiveAPI } from "@egjs/vue3-flicking";
import { ref } from "vue";
import "@egjs/vue3-flicking/dist/flicking.css";

const COLORS = ["#3498db", "#e74c3c", "#2ecc71", "#9b59b6", "#f39c12"];
const LENGTH = 5;

const flickingRef = ref(null);
const { indexProgress } = useFlickingReactiveAPI(flickingRef);

const getStyle = index => {
  const childProgress = ((index - indexProgress.value + LENGTH * 1.5) % LENGTH) - LENGTH * 0.5;
  const scale = Math.max(0, 0.9 - Math.abs(childProgress) * 0.2);

  return {
    backgroundColor: COLORS[index % COLORS.length],
    transformOrigin: `${50 - childProgress * 50}% 50%`,
    transform: `rotateY(${-childProgress * 50}deg) scale(${scale})`
  };
};
</script>

<template>
  <Flicking
    ref="flickingRef"
    :options="{ circular: true, align: 'center' }"
    class="flicking-coverflow"
  >
    <div
      v-for="index in 5"
      :key="index - 1"
      class="flicking-panel"
      :style="getStyle(index - 1)"
    >
      {{ index }}
    </div>
  </Flicking>
</template>


<style>

.flicking-viewport.vertical {
  display: block;
  width: 100%;
}

.flicking-panel {
  width: 200px;
  height: 150px;
  margin-right: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.panel-1 { background: #3e8ed0; }
.panel-2 { background: #00d1b2; }
.panel-3 { background: #f14668; }
.panel-4 { background: #ffe08a; color: #333; }
.panel-5 { background: #48c78e; }

.demo-container {
  margin-bottom: 24px;
}

.demo-label {
  font-weight: bold;
  margin-bottom: 8px;
  color: #666;
}

.button {
  padding: 8px 16px;
  margin: 4px;
  border: 2px solid #3498db;
  background: transparent;
  color: #3498db;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.button:hover {
  background: #3498db;
  color: white;
}

.controls {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  gap: 8px;
}

.flicking-coverflow {
  perspective: 800px;
}

.flicking-coverflow .flicking-camera {
  transform-style: preserve-3d;
}

.flicking-panel {
  width: 150px;
  height: 200px;
  margin: 0 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bold;
  color: white;
  backface-visibility: hidden;
}

</style>

Open Sandbox

요약

주요 API

속성	타입	설명
indexProgress	number	소수점 패널 인덱스로 표현된 카메라 위치
useFlickingReactiveAPI	Hook (React)	React에서 reactive 상태를 구독
connectFlickingReactiveAPI	Function (Vanilla)	Vanilla JS에서 reactive 상태를 구독

효과 매핑

패널 위치	rotateY	scale	transformOrigin
현재 (childProgress ~ 0)	0deg	0.9	50% 50%
인접 (childProgress ~ +/-1)	-/+50deg	0.7	중앙 방향으로 이동
먼 거리 (childProgress ~ +/-2)	-/+100deg	0.5	중앙 방향으로 이동

상세 설명

indexProgress란?

indexProgress는 현재 카메라 위치를 소수점 패널 인덱스로 나타냅니다. 예를 들어, 2.5는 카메라가 패널 2와 패널 3 사이의 정확히 중간 지점에 있다는 의미입니다. 드래그 중 실시간으로 업데이트되어 부드러운 시각적 전환을 가능하게 합니다.

동작 원리

순환 모드에서 각 패널의 childProgress는 래핑(wrapping)을 적용하여 계산됩니다:

const childProgress = (index - indexProgress + length * 1.5) % length - length * 0.5;

이 값은 세 가지 CSS transform 속성을 제어합니다:

• rotateY: 패널이 Y축을 기준으로 회전하여 중앙에서 멀어질수록 기울어짐
• scale: 패널이 중앙에서 멀어질수록 축소
• transformOrigin: 자연스러운 원근 회전 기준점을 만들기 위해 이동

관련 옵션

• circular: true: 끊김 없이 매끄럽게 순환하는 커버플로우를 위해 필수입니다.
• align: "center": 활성 패널을 커버플로우의 시각적 중앙에 배치합니다.

사용 시나리오

이런 경우에 사용하세요

• 앨범 / 포트폴리오 갤러리
• 제품 쇼케이스
• 미디어 플레이어 UI

주의사항

참고

• 3D 효과가 렌더링되려면 viewport에 CSS perspective를, camera에 transform-style: preserve-3d를 설정해야 합니다.
• 순환 모드 사용 시 빈 공간이 생기지 않도록 최소 5개 이상의 패널을 사용하세요.

관련 링크

관련 API

• indexProgress: 소수점 패널 인덱스 진행률
• connectFlickingReactiveAPI: Flicking을 Reactive API에 연결

관련 데모

• Parallax: indexProgress를 활용한 패럴랙스 스크롤 효과
• Progress Bar: 스크롤 진행률 표시기