🚀 Swiper×GSAPで作る！魅惑のアニメーションスライダー入門 ✨

# Swiperとアニメーションで魅力的なスライダーを作ろう！🚀

こんにちは😊
[株式会社プロドウガ](https://qiita.com/organizations/prodouga-com)の@YushiYamamotoです！
[らくらくサイト](https://rakuraku-site.prodouga.com/)の開発・運営を担当しながら、React.js・Next.js専門のフリーランスエンジニアとしても活動しています❗️

今回は、Webサイトに動きと魅力を加える「Swiperとアニメーションを組み合わせたリッチなスライダー」の実装方法について解説します。初心者でも簡単に理解できるように、コードや実装手順をわかりやすく説明していきます✨


<p class="codepen" data-height="694" data-default-tab="result" data-slug-hash="ByamEWZ" data-pen-title="Emotionとswiperを使ったリッチなアニメーションページ" data-editable="true" data-user="yamamotoyushi" style="height: 694px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yamamotoyushi/pen/ByamEWZ">
  Emotionとswiperを使ったリッチなアニメーションページ</a> by Yushi Yamamoto (<a href="https://codepen.io/yamamotoyushi">@yamamotoyushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>


## **なぜSwiperを使うのか？🤔**

最近のWebサイトでは、ユーザー体験を向上させるためにインタラクティブな要素が不可欠です。その中でもスライダーは情報を効率的に表示する手段として人気があります。特に「Swiper」は以下の理由でおすすめです：

- 📱 **モバイル対応が抜群**：タッチスワイプに最適化されています。
- 🛠️ **カスタマイズ性が高い**：自由度の高い設定が可能。
- 🎨 **豊富なアニメーション効果**：視覚的に魅力的な表現が簡単。
- 🔌 **様々なフレームワークと互換性**：ReactやVueとも簡単に統合できます。

---

## **今回作るもの：クリエイティブなスライダー✨**

以下の特徴を持つリッチなアニメーションスライダーを作ります：

- スムーズなスライド切り替え
- テキストのフェードイン効果
- 画像のクリップパスアニメーション
- レスポンシブデザイン対応

完成イメージはこんな感じです👇

```
+----------------------------------+
|                                  |
|  +------------------+            |
|  |                  |            |
|  |     画像部分     |  テキスト  |
|  |    (アニメー     |   部分     |
|  |    ション付き)   |            |
|  |                  |  ボタン    |
|  +------------------+            |
|                                  |
|  ○ ● ○                          |
+----------------------------------+
```

---

## **実装手順🔧**

### **1. 必要なライブラリの準備**

まずはHTMLファイルを作成し、以下のCDNリンクを読み込みます。

```html
<!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
```

---

### **2. HTML構造**

以下のようなHTML構造を準備します。

```html
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="content">
        <h2 class="title">クリエイティブデザイン</h2>
        <p class="description">最新技術でインタラクティブ体験を提供します。</p>
        <button class="cta-button">詳細を見る</button>
      </div>
      <div class="image-container">
        <img class="swiper-image" src="https://picsum.photos/800/600?random=1" alt="デザイン">
      </div>
    </div>
    <!-- 他のスライドも同様 -->
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
```

---

### **3. CSSでスタイリング**

以下は基本的なCSSスタイルです。

```css
.swiper {
  width: 100%;
  height: 100vh;
}

.swiper-slide {
  display: flex;
  align-items: center;
}

.swiper-image {
  clip-path: circle(15% at center);
  transition: clip-path 0.7s ease-out;
}

.content {
  opacity: 0;
  transform: translateY(30px);
}

.swiper-slide-active .content {
  opacity: 1;
  transform: translateY(0);
}
```

---

### **4. JavaScriptでアニメーションを実装**

SwiperとGSAPを組み合わせてアニメーションを追加します。

<details><summary>JavaScriptコード</summary>

```javascript
const swiper = new Swiper('.swiper', {
  loop: true,
  pagination: { el: '.swiper-pagination', clickable: true },
  navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
});

swiper.on('slideChange', () => {
  const activeSlide = document.querySelector('.swiper-slide-active');
  
  // GSAPでアニメーション
  gsap.fromTo(activeSlide.querySelector('.content'), 
    { opacity: 0, y: 30 }, 
    { opacity: 1, y: 0, duration: 0.8 }
  );
});
```

</details>


## **カスタマイズポイント🛠️**

1. **方向変更**：縦方向から横方向へ変更可能。

```javascript
const swiper = new Swiper('.swiper', { direction: 'horizontal' });
```

2. **エフェクト追加**：フェードや3Dエフェクトなど。

```javascript
const swiper = new Swiper('.swiper', { effect: 'fade' });
```

3. **アクセシビリティ配慮**：`prefers-reduced-motion` を活用。

```css
@media (prefers-reduced-motion) {
  * { animation: none; }
}
```


---

## **まとめ📌**

今回の記事では、SwiperとGSAPを活用したリッチなスライダーの作り方をご紹介しました。これらの技術を組み合わせることで、視覚的に魅力的でインタラクティブなWebサイトが構築できます。ぜひ自分だけのオリジナルスライダーを作ってみてください！

---

# 最後に：業務委託のご相談を承ります

私は業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用したレスポンシブなWebサイト制作、インタラクティブなアプリケーション開発、API連携など幅広いご要望に対応可能です。

「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、お気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

👉 [ポートフォリオ](https://yushiyamamoto.vercel.app/)

🌳 [らくらくサイト](https://rakuraku-site.prodouga.com/)