Fade

패널 전환 시 투명도를 조절하여 페이드 인/아웃 효과를 적용합니다.

JavaScript

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

const flicking = new Flicking("#flick", {
  circular: true,
  preventDefaultOnDrag: true
});

flicking.addPlugins(new Fade());

Open Sandbox

React

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

const plugins = [new Fade()];

export default function App() {
  return (
    <Flicking circular={true} plugins={plugins} preventDefaultOnDrag={true}>
      <div className="flicking-panel">
        <img className="panel-image" src="https://picsum.photos/seed/fade1/600/300" />
      </div>
      <div className="flicking-panel">
        <img className="panel-image" src="https://picsum.photos/seed/fade2/600/300" />
      </div>
      <div className="flicking-panel">
        <img className="panel-image" src="https://picsum.photos/seed/fade3/600/300" />
      </div>
    </Flicking>
  );
}

Open Sandbox

Vue@3

<template>
  <Flicking :options="{ circular: true, preventDefaultOnDrag: true }" :plugins="plugins">
    <div class="flicking-panel">
      <img class="panel-image" src="https://picsum.photos/seed/fade1/600/300" />
    </div>
    <div class="flicking-panel">
      <img class="panel-image" src="https://picsum.photos/seed/fade2/600/300" />
    </div>
    <div class="flicking-panel">
      <img class="panel-image" src="https://picsum.photos/seed/fade3/600/300" />
    </div>
  </Flicking>
</template>

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

const plugins = [new Fade()];
</script>


<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-panel {
  position: relative;
  border-radius: 5px;
  width: 80%;
  margin-right: 10px;
  height: 200px;
  overflow: hidden;
}

.panel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

</style>

Open Sandbox

요약

주요 옵션

옵션	타입	기본값	설명
selector	string	""	효과를 적용할 요소의 CSS 선택자. 빈 문자열이면 패널 자체에 적용
scale	number	1	효과 강도 배율

상세 설명

동작 원리

Fade 플러그인은 각 패널의 가시 비율(visible ratio)에 따라 opacity를 자동으로 조절합니다. 현재 보이는 패널은 불투명하게, 벗어나는 패널은 투명하게 처리됩니다.

사용법

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

// 기본 사용
flicking.addPlugins(new Fade());

// 특정 요소에만 적용
flicking.addPlugins(new Fade("img"));

// 효과 강도 조절
flicking.addPlugins(new Fade("", 2));

주의사항

주의

• circular: true와 함께 사용하면 끊김 없는 페이드 효과를 구현할 수 있습니다.
• 패널 배경이 투명한 경우 뒤쪽 패널이 비칠 수 있으므로, 불투명한 배경색이나 이미지를 사용하는 것이 좋습니다.

관련 링크

관련 데모

• Parallax: 시차 스크롤 효과
• AutoPlay: 자동 재생과 함께 사용