Parallax

패널 내부 요소에 시차 스크롤(Parallax) 효과를 적용합니다. 패널의 outsetProgress에 따라 대상 요소를 수평 이동시켜 깊이감을 만듭니다.

JavaScript

import Flicking from "@egjs/flicking";
import { Parallax } from "@egjs/flicking-plugins";
import "@egjs/flicking/dist/flicking.css";
import "./styles.css";

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

flicking.addPlugins(
  new Parallax(".bar-0", 2),
  new Parallax(".bar-1", 2),
  new Parallax(".bar-2", 2),
  new Parallax(".bar-3", 2),
  new Parallax(".bar-4", 2)
);

Open Sandbox

React

import { Parallax } from "@egjs/flicking-plugins";
import Flicking from "@egjs/react-flicking";
import "@egjs/react-flicking/dist/flicking.css";
import "./styles.css";

const plugins = [
  new Parallax(".bar-0", 2),
  new Parallax(".bar-1", 2),
  new Parallax(".bar-2", 2),
  new Parallax(".bar-3", 2),
  new Parallax(".bar-4", 2)
];

export default function App() {
  return (
    <Flicking plugins={plugins}>
      {[0, 1, 2, 3, 4].map(i => (
        <div className="skeleton-panel" key={i}>
          <span className="skeleton-bar bar-0" />
          <span className="skeleton-bar bar-1" />
          <span className="skeleton-bar bar-2" />
          <span className="skeleton-bar bar-3" />
          <span className="skeleton-bar bar-4" />
        </div>
      ))}
    </Flicking>
  );
}

Open Sandbox

Vue@3

<script setup>
import { Parallax } from "@egjs/flicking-plugins";
import Flicking from "@egjs/vue3-flicking";
import "@egjs/vue3-flicking/dist/flicking.css";

const plugins = [
  new Parallax(".bar-0", 2),
  new Parallax(".bar-1", 2),
  new Parallax(".bar-2", 2),
  new Parallax(".bar-3", 2),
  new Parallax(".bar-4", 2)
];
</script>

<template>
  <Flicking :plugins="plugins">
    <div v-for="i in 5" :key="i" class="skeleton-panel">
      <span class="skeleton-bar bar-0" />
      <span class="skeleton-bar bar-1" />
      <span class="skeleton-bar bar-2" />
      <span class="skeleton-bar bar-3" />
      <span class="skeleton-bar bar-4" />
    </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;
  position: relative;
  overflow: hidden;
}

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

.bar-0 {
  top: 44px;
  width: 240px;
}
.bar-1 {
  top: 64px;
  width: 95px;
}
.bar-2 {
  top: 84px;
  width: 190px;
}
.bar-3 {
  top: 104px;
  width: 140px;
}
.bar-4 {
  top: 124px;
  width: 190px;
}

</style>

Open Sandbox

요약

주요 옵션

옵션	타입	기본값	설명
selector	string	""	효과를 적용할 요소의 CSS 선택자 (querySelector 사용)
scale	number	1	시차 이동 강도 배율

이동량 공식

position = ((parentWidth - elemWidth) / 2) × outsetProgress × scale
transform: translate(-50%) translate(${position}px)

조건	이동 방향	설명
요소 > 부모	스크롤 반대	콘텐츠가 패널보다 느리게 이동 (이미지 패럴랙스)
요소 < 부모	스크롤 같은 방향	콘텐츠가 패널보다 빠르게 이동 (깊이 효과)

상세 설명

동작 원리

플러그인은 translate(-50%) translate(${position}px)를 대상 요소에 적용합니다. translate(-50%)가 항상 포함되므로, 대상 요소는 반드시 position: absolute; left: 50%로 배치해야 정상적으로 중앙 정렬됩니다.

• parentWidth - elemWidth: 부모와 요소의 너비 차이가 이동 가능 범위를 결정합니다
• outsetProgress: 패널이 정렬 위치에서 벗어난 정도 (중앙 = 0, 좌측 이탈 = -1, 우측 이탈 = 1)
• scale: 이동량을 증폭합니다

사용법

querySelector로 패널당 첫 번째 매칭 요소 하나만 대상으로 합니다. 여러 요소에 각각 다른 시차 효과를 주려면 인스턴스를 분리하세요.

import { Parallax } from "@egjs/flicking-plugins";

// 단일 대상: 패널 내 이미지에 시차 효과
flicking.addPlugins(new Parallax("img"));

// 다중 대상: 요소별 고유 셀렉터로 개별 제어
flicking.addPlugins(
  new Parallax(".bar-0", 2),
  new Parallax(".bar-1", 2),
  new Parallax(".bar-2", 2)
);

CSS 설정

/* 패널: overflow: hidden + position: relative 필수 */
.flicking-panel {
  position: relative;
  overflow: hidden;
}

/* 대상 요소: position: absolute + left: 50% 필수 */
/* translate(-50%)가 항상 적용되므로 이 조합으로 중앙 정렬됩니다 */
.parallax-target {
  position: absolute;
  left: 50%;
}

주의

• 대상 요소에 position: absolute; left: 50%가 없으면 translate(-50%)에 의해 레이아웃이 깨집니다.
• 요소 너비와 부모 너비가 같으면 이동량이 0이 되어 효과가 보이지 않습니다.
• selector를 빈 문자열로 두면 패널 자체에 효과가 적용됩니다.

관련 링크

관련 데모

• Parallax (Reactive API): indexProgress를 사용한 패럴랙스 (opacity 효과 포함)
• Fade: 페이드 효과
• Perspective: 3D 원근 효과