Parallax

Reactive API의 indexProgress를 사용하여 패널이 카메라 중앙에서 멀어질수록 내부 요소들이 서로 다른 속도로 움직이는 패럴랙스 효과를 만듭니다.

JavaScript

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

const OFFSETS = [180, 160, 140, 120, 100];

const flicking = new Flicking("#flick");
const reactiveAPI = connectFlickingReactiveAPI(flicking);

const panels = document.querySelectorAll(".skeleton-panel");

const update = value => {
  panels.forEach((panel, index) => {
    const childProgress = index - value;
    const opacity = Math.min(Math.max(1 - Math.abs(childProgress), 0), 1);

    const bars = panel.querySelectorAll(".skeleton-bar");
    bars.forEach((bar, i) => {
      bar.style.transform = `translateX(${childProgress * OFFSETS[i]}px)`;
      bar.style.opacity = opacity;
    });
  });
};

// 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 OFFSETS = [180, 160, 140, 120, 100];
const SIZES = ["size4", "size1", "size3", "size2", "size3"];

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

  return (
    <Flicking ref={flickingRef}>
      {[0, 1, 2, 3, 4].map(panelIndex => {
        const childProgress = panelIndex - indexProgress;
        const opacity = Math.min(Math.max(1 - Math.abs(childProgress), 0), 1);

        return (
          <div key={panelIndex} className="skeleton-panel">
            {SIZES.map((size, i) => (
              <span
                key={i}
                className={`skeleton-bar skeleton-bar-${size}`}
                style={{
                  transform: `translateX(${childProgress * OFFSETS[i]}px)`,
                  opacity
                }}
              />
            ))}
          </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 OFFSETS = [180, 160, 140, 120, 100];
const SIZES = ["size4", "size1", "size3", "size2", "size3"];

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

const getBarStyle = (panelIndex, barIndex) => {
  const childProgress = panelIndex - indexProgress.value;
  const opacity = Math.min(Math.max(1 - Math.abs(childProgress), 0), 1);
  return {
    transform: `translateX(${childProgress * OFFSETS[barIndex]}px)`,
    opacity
  };
};
</script>

<template>
  <Flicking ref="flickingRef">
    <div v-for="panelIndex in 5" :key="panelIndex - 1" class="skeleton-panel">
      <span
        v-for="(size, i) in SIZES"
        :key="i"
        :class="'skeleton-bar skeleton-bar-' + size"
        :style="getBarStyle(panelIndex - 1, i)"
      />
    </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;
}

.skeleton-panel {
  width: 280px;
  height: 180px;
  margin-right: 10px;
  border-radius: 12px;
  background: #3498db;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  gap: 8px;
  overflow: hidden;
}

.skeleton-bar {
  height: 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
}

.skeleton-bar-size1 {
  width: 40%;
}
.skeleton-bar-size2 {
  width: 60%;
}
.skeleton-bar-size3 {
  width: 80%;
}
.skeleton-bar-size4 {
  width: 100%;
}

</style>

Open Sandbox

요약

주요 API

속성	타입	설명
indexProgress	number	소수점 패널 인덱스로 표현된 카메라 위치

효과 매핑

패널 위치	translateX	투명도(Opacity)
현재 (childProgress = 0)	0px	1.0
인접 (childProgress = ±1)	±offset	0.0

상세 설명

동작 원리

각 패널에는 스켈레톤 바 요소가 포함되어 있습니다. 각 패널의 childProgress는 panelIndex - indexProgress로 계산됩니다. 이 값은 두 가지 시각 효과를 제어합니다:

1. 수평 이동: 각 바는 childProgress * offset만큼 이동하며, 각 바마다 서로 다른 offset 값(100-180px)을 가지므로 층층이 쌓인 깊이감 효과가 생깁니다.
2. 투명도: |childProgress| 값에 따라 현재 패널(1)에서 인접 패널(0)로 서서히 사라집니다.

바마다 다른 offset 값이 패럴랙스 특유의 시각 효과를 만들어냅니다: "카메라"에 가까운 요소가 먼 요소보다 더 빠르게 움직이는 것처럼 보입니다.

관련 옵션

• moveType: "freeScroll": 자유 스크롤로 더 부드럽고 연속적인 패럴랙스 효과를 만듭니다.
• 기본 moveType (snap): 패럴랙스 효과가 동작하지만 패널 위치에 스냅됩니다.

사용 시나리오

이런 경우에 사용하세요

• 레이어 요소가 있는 카드 기반 콘텐츠
• 스토리텔링 / 에디토리얼 캐러셀
• 깊이감 효과가 있는 제품 쇼케이스

관련 링크

관련 API

• indexProgress: 소수점 패널 인덱스 진행률

관련 데모

• Coverflow: indexProgress를 활용한 3D 회전 효과
• Progress Bar: 스크롤 진행률 표시기