Swiperとアニメーションで魅力的なスライダーを作ろう！🚀
こんにちは😊
株式会社プロドウガの@YushiYamamotoです！
らくらくサイトの開発・運営を担当しながら、React.js・Next.js専門のフリーランスエンジニアとしても活動しています❗️
今回は、Webサイトに動きと魅力を加える「Swiperとアニメーションを組み合わせたリッチなスライダー」の実装方法について解説します。初心者でも簡単に理解できるように、コードや実装手順をわかりやすく説明していきます✨
See the Pen Emotionとswiperを使ったリッチなアニメーションページ by Yushi Yamamoto (@yamamotoyushi) on CodePen.
なぜSwiperを使うのか？🤔
最近のWebサイトでは、ユーザー体験を向上させるためにインタラクティブな要素が不可欠です。その中でもスライダーは情報を効率的に表示する手段として人気があります。特に「Swiper」は以下の理由でおすすめです：
- 📱 モバイル対応が抜群：タッチスワイプに最適化されています。
- 🛠️ カスタマイズ性が高い：自由度の高い設定が可能。
- 🎨 豊富なアニメーション効果：視覚的に魅力的な表現が簡単。
- 🔌 様々なフレームワークと互換性：ReactやVueとも簡単に統合できます。
今回作るもの：クリエイティブなスライダー✨
以下の特徴を持つリッチなアニメーションスライダーを作ります：
- スムーズなスライド切り替え
- テキストのフェードイン効果
- 画像のクリップパスアニメーション
- レスポンシブデザイン対応
完成イメージはこんな感じです👇
+----------------------------------+
| |
| +------------------+ |
| | | |
| | 画像部分 | テキスト |
| | (アニメー | 部分 |
| | ション付き) | |
| | | ボタン |
| +------------------+ |
| |
| ○ ● ○ |
+----------------------------------+
実装手順🔧
1. 必要なライブラリの準備
まずはHTMLファイルを作成し、以下のCDNリンクを読み込みます。
<!-- 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構造を準備します。
<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スタイルです。
.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を組み合わせてアニメーションを追加します。
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 }
);
});
カスタマイズポイント🛠️
- 方向変更：縦方向から横方向へ変更可能。
const swiper = new Swiper('.swiper', { direction: 'horizontal' });
- エフェクト追加：フェードや3Dエフェクトなど。
const swiper = new Swiper('.swiper', { effect: 'fade' });
-
アクセシビリティ配慮：
prefers-reduced-motionを活用。
@media (prefers-reduced-motion) {
* { animation: none; }
}
まとめ📌
今回の記事では、SwiperとGSAPを活用したリッチなスライダーの作り方をご紹介しました。これらの技術を組み合わせることで、視覚的に魅力的でインタラクティブなWebサイトが構築できます。ぜひ自分だけのオリジナルスライダーを作ってみてください！
最後に：業務委託のご相談を承ります
私は業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用したレスポンシブなWebサイト制作、インタラクティブなアプリケーション開発、API連携など幅広いご要望に対応可能です。
「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、お気軽にご相談ください。一緒にビジネスの成長を目指しましょう！
👉 ポートフォリオ
🌳 らくらくサイト