carousels-sliders

カルーセルとスライダーのアニメーション原則

ディズニーの12の原則をカルーセルやスライダーに適用し、滑らかで直感的なナビゲーションを実現します。

カルーセルに適用する原則

1. スクワッシュ＆ストレッチ

素早いスワイプ時に、スライドをスクロール方向へわずかに圧縮できます。速度と勢いの印象が高まります。

2. 予備動作

スライドが切り替わる前に、現在のスライドをナビゲーション方向へ5～10px移動できます。ボタンは動作を開始する前に押し込まれるようにできます。

3. 演出

現在のスライドやアクティブなスライドを、より大きく、中央に配置し、不透明度を高めて目立たせます。隣接するスライドは暗くしたり、縮小したりできます。

4. ストレートアヘッドとポーズ・トゥ・ポーズ

ポーズ・トゥ・ポーズを使い、各スライドの正確な位置を定義します。スナップ位置は明確で予測しやすいものにします。

5. フォロースルーとオーバーラッピングアクション

スナップ後に、スライドをわずかに行き過ぎさせてから元の位置に戻すことができます。スライド内のコンテンツ（テキストやボタン）は、コンテナーの動きに遅れて追従します。

6. スローインとスローアウト

スワイプ後のリリースにはease-out（勢いを緩やかに減速）を使います。ボタンによるナビゲーションにはease-in-outを使います。滑らかなスライドにはcubic-bezier(0.25, 0.1, 0.25, 1)を使います。

7. アーク

3Dカルーセルでは、スライドを曲線に沿って回転させます。カバーフロー効果は自然にアークに沿います。フラットなカルーセルでも、わずかなY方向の動きを加えられます。

8. 二次的動作

スライドの移動（主要な動作）中に、ページネーションを更新（二次的な動作）し、隣接するスライドの拡大・縮小やフェード（三次的な動作）、プログレスバーの移動（四次的な動作）を行います。

9. タイミング

• スライドの遷移：300～500ms
• スワイプの勢い：200～400ms
• ページネーションのドット：150ms
• 自動再生の間隔：4000～6000ms
• ホバー時の一時停止：即時
• 隣接するスライドの拡大・縮小：250ms

10. 誇張

ヒーローカルーセルでは、よりドラマチックな遷移を使えます。製品カルーセルでは、より滑らかで、注意をそらしにくい動きにします。用途に合わせて調整します。

11. 正確な描画

スライドの寸法を一貫させます。間隔は均一に保ちます。変形中もアスペクト比を維持します。

12. 魅力

滑らかなカルーセルは高級感を与えます。ぎくしゃくするスライダーは安っぽく感じられます。タッチへの反応はネイティブのように感じられるべきです。ここへの投資は大きな効果をもたらします。

CSSでの実装

.carousel-track {
  display: flex;
  transition: transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.carousel-slide {
  flex-shrink: 0;
  transition: transform 300ms ease-out,
              opacity 300ms ease-out;
}

.carousel-slide:not(.active) {
  transform: scale(0.9);
  opacity: 0.6;
}

.pagination-dot {
  transition: transform 150ms ease-out,
              background-color 150ms ease-out;
}

.pagination-dot.active {
  transform: scale(1.3);
}

/* CSS scroll snap */
.carousel-container {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.carousel-slide {
  scroll-snap-align: center;
}

主なプロパティ

• transform：translateX、scale
• opacity：非アクティブなスライド
• scroll-snap-type：ネイティブのスナップ
• scroll-behavior：スムーズなスクロール
• transition：スライドの移動