【Swiper】GSAPと組み合わせて斜め向きに移動するスライダーを作成する方法

SHARE

今回はスライダープラグインの王道『Swiper』にGSAPと組み合わせて斜め向きに移動するスライダーを実装したソースコードを公開いたします。

Swiperはオプションが豊富でGSAPと相性が良くGSAPを組み合わせて実装しております。swiperのコールバック関数を使用することで自由度が広がることを知ってもらえたら嬉しいです。

1.実装イメージ

実装イメージは以下の通りです。
マウスホイールでスクロールすることでスライダーが動き出します。斜めにスライドすることで一味違うスライダーとなっております。

See the Pen verticalSwiper – gsap01 by りょーすけ (@s_ryosuke_1242) on CodePen.

コピペしてすぐに実務で実装できるようにしております。
注意点としては予め、CDNや公式サイトからプラグインをダウンロードしておきましょう。

swiperのCDNはコチラ

gsapのCDNはコチラ

必要なファイルは『gsap.min.js』『swiper-bundle.min.css』『swiper-bundle.min.js』の3つです

2.HTML

HTMLはコチラの通りになっています。特に変わったところはありません。

<div class="swiper-container vertical-slider">
  <div class="swiper-wrapper vertical-slider__wrapper">
    <section id="scene1" class="skyblue swiper-slide vertical-slider__slide">
      <div class="HomeScene-bg">
        <img src="https://ryo-sukeblog.net/wp-content/uploads/2022/05/mv01.jpg" alt="" srcset="">
      </div>
    </section>
    <section id="scene2" class="ccc swiper-slide vertical-slider__slide">
      <div class="HomeScene-bg">
        <img src="https://ryo-sukeblog.net/wp-content/uploads/2022/05/mv02.jpg" alt="" srcset="">
      </div>
    </section>
    <section id="scene3" class="crimson swiper-slide vertical-slider__slide">
      <div class="HomeScene-bg">
        <img src="https://ryo-sukeblog.net/wp-content/uploads/2022/05/mv03.jpg" alt="" srcset="">
      </div>
    </section>
  </div>
  <div class="swiper-pagination vertical-slider__pagination"></div>
</div>

3.CSS

次にCSSです。swiperの特徴として現在表示されているスライドには『.swiper-slide-active』が付与されたり、一つ先のスライドには『swiper-slide-next』が付与されるなどの機能が予め備わっているためこれらを活用してスタイルを当てていきます。

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body,main{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
li{
    list-style: none;
}
/* スライダー全体 */
.vertical-slider {
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}
.swiper-wrapper{
    transition-timing-function:ease-in-out;
    position: relative;
    z-index: 2;
}
/* スライド */
.vertical-slider__slide {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10rem;
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
    color: #fff;

    position: relative;
    z-index: 3;
}
.swiper-pagination-bullet {
    outline: none !important;
    background-color: transparent;
    width: 14px;
    height: 14px;
    margin: 16px 0;
    border: solid white 1.75px;
    -webkit-transition-property: border-color;
    transition-property: border-color;
    -webkit-transition-duration: .8s;
    transition-duration: .8s;
    opacity: 1;
    position: relative;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

.swiper-pagination-bullet::after {
    content: "";
    display: inline-block;
    width: 125%;
    height: 125%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    -webkit-transition-property: -webkit-transform background-color;
    transition-property: -webkit-transform background-color;
    transition-property: transform background-color;
    transition-property: transform background-color, -webkit-transform background-color;
    -webkit-transition-duration: .8s;
    transition-duration: .8s;
    background-color: white;
    border-radius: 14px;
}

.HomeScene-bg{
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    /* position: fixed;
    top: 0;
    left: 0; */

    visibility: hidden;
}
.ccc{
    background-color: #ccc;
}
.crimson{
    background-color: crimson;
}
.skyblue{
    background-color: skyblue;
}
.HomeScene-bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;

    position: absolute;
    z-index: 6;
}

.swiper-slide-prev .HomeScene-bg,.swiper-slide-active .HomeScene-bg,.swiper-slide-next .HomeScene-bg{
    visibility: inherit;
    z-index: 4;
}

4.JavaScript

最後にJavaScriptです。swiperの最大の特徴でもあるコールバック関数を使用することで自由度が増します。

数ある中で今回使用しているのは『transitionStart』

これはスライドが開始した瞬間に発火する関数でこれが呼び出されると同時にGSAPで手助けして斜めに移動しているかのようにアニメーションを付与してあげます。

const verticalSlider = new Swiper(".vertical-slider", {
	direction: "vertical", // スライダーの向きを縦にする
	slidesPerView: 1, // 一度に1枚のスライドを表示
	speed: 1000,
	mousewheel: true, // マウスホイールやスクロールを有効にする
	pagination: {
	  el: ".vertical-slider__pagination", // ページネーション要素のクラスを指定
	  type: "bullets", // ページネーションの形を指定
	  clickable: false, // ページネーションをクリックできるようにするかどうか
	},
});

var tlActive = gsap.timeline();
var tlPrev = gsap.timeline();
var tlNext = gsap.timeline();

const m1 = 0.1;/*奥に動く*/
const m2 = 0.8;/*オフセット*/
const m3 = 0.8;/*scale*/
const offsetX = '5%';
const offsetY = '5%';
const moveX = '30%';
const moveY = '100%';

// 初期状態
window.addEventListener('load', ()=> {

	gsap.to('.pagetop',{position:'fixed',x:"90%",y:"90%"})
	
	gsap.set('.swiper-slide-next .HomeScene-bg',{scale:.8,x:'-'+moveX,y:moveY,transition:.8})
})

// スライドしたら
verticalSlider.on('transitionStart', function () {

	tlActive
	.to('.swiper-slide-active .HomeScene-bg',{duration:.5,position:'fixed',x:0,y:0})
	.to('.swiper-slide-active .HomeScene-bg',{scale:1,duration:.2},'>')

	tlPrev
	.to('.swiper-slide-prev .HomeScene-bg',{scale:.8,transition:.5,position:'fixed',x: offsetX,y:'-'+offsetY})
	.to('.swiper-slide-prev .HomeScene-bg',{x: moveX,y:'-'+moveY,transition:.8},'>')
	
	tlNext
	.to('.swiper-slide-next .HomeScene-bg',{scale:.8,transition:m1,x: '-'+offsetX,y:offsetY})
	.to('.swiper-slide-next .HomeScene-bg',{x:'-'+moveX,y: moveY,transition:.8},'<')
});

5.まとめ

いかがだったでしょうか？swiperのコールバック関数を使用することで自由度が増したスライダーを作成することが可能となります。今回載せているのは完全版ではなく実際に案件で使用する場合はドット部分押した場合、全ブラウザに対応など追記が必要となります。

ただこれらの「こういう機能がつけたいな～」というものはコールバック関数を駆使することで実装が可能です。

何かしらの気付きやきっかけになっていただけたら嬉しいです。最後までご視聴ありがとうございました～

前の記事

【GSAP】フリップ演出を実装 CSSのみでも再現できるけども…

次の記事

PixiJSでフィルター機能を使用して画像の色を変化させる方法…