【GSAP】片側が固定されるスライダー【実務ですぐ使える！！】

SHARE

今回はGreenSock社が提供するJavaScriptアニメーションライブラリGSAPで
スクロールしている最中に片側の面が固定される機能を実装しました！

cssでも同様の機能は実装も可能ですが、今回はGSAPでより応用が効くものを制作しました。

特集スライダー 【CSS】簡単に実装できるオシャレな特集スライダー postion:sticky;【コピペOK】

コピペしてすぐに実務で実装できるようにしております。ぜひ最後までご覧ください！

1.実装イメージ

実装イメージは以下の通りです。

See the Pen GSAP 片側固定スライダー by りょーすけ (@s_ryosuke_1242) on CodePen.

2.HTML

次にHTMLです。

<body>
  <main>
    <section class="spacer"></section>
    <section class="slider__wrapper">
      <div class="slider__wrap-left">
        <div class="ball"></div>
      </div>
      <div class="slider__wrap-right">
        <ul class="slidedr__wrap-img">
           <li class="img-box"><img src="https://ryo-sukeblog.net/wp-content/uploads/2022/04/cherry-blossoms.jpg" alt=""></li>
           <li class="img-box"><img src="https://ryo-sukeblog.net/wp-content/uploads/2022/04/sea.jpg" alt=""></li>
           <li class="img-box"><img src="https://ryo-sukeblog.net/wp-content/uploads/2022/04/scene.jpg" alt=""></li>
           <li class="img-box"><img src="https://ryo-sukeblog.net/wp-content/uploads/2022/04/winter.jpg" alt=""></li>
        </ul>
      </div>
    </section>
    <section class="spacer"></section>
  </main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<script src="./script.js"></script>
</body>

3.CSS

次にCSSです。

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    width: 100%;
}
body{
    width: 100%;
    background-color: #00223E;
}
main{
    width: 100%;
}
li{
    list-style: none;
}
.spacer{
    width: 100%;
    height: 50vh;
}
.slider__wrapper{
    width: 100%;
    height: 100%;
    display: flex;
}
.slider__wrap-left,.slider__wrap-right{
    width: 50%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ball{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
.slider__wrap-right .img-box{
    padding: 10vw 0;
    width: 95%;
    margin: 0 auto;
}
.slider__wrap-right .img-box:first-child{
    padding-top: 0;
}
.slider__wrap-right .img-box:last-child{
    padding-bottom: 0;
}
.slider__wrap-right .img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

4.JavaScript

最後にJavaScriptです。
HTMLのbodyタグの手前にも記述されていますがCDNで『ScrollTrigger』を予めダウンロードしておきましょう

const tl = gsap.timeline();
let elHeight = document.querySelector('.slider__wrap-right').clientHeight;
let sliderHeight = elHeight - document.querySelector('.slider__wrap-left').clientHeight;
const images = document.querySelectorAll('.img-box img');
const imgBox = document.querySelectorAll('.img-box');
const backgroundImage = [
    'linear-gradient(180deg, #fffbd5 0%, #D384AE 80%)',
    'linear-gradient(180deg, #00F260 0%, #0575E6 85%)',
    'linear-gradient(180deg, #f12711 0%, #f5af19 85%)',
    'linear-gradient(180deg, #0575E6 0%, #EAEAEA 85%)'
]

tl
.to('.slider__wrapper',{
    scrollTrigger:{
        trigger:'.slider__wrap-left',
        // markers:true,
        pin:true,
        scrub:true,
        start:'center center',
        end:'+='+sliderHeight
    }
})

for (let i = 0; i < imgBox.length; i++) {
    gsap.to('.ball',{
        scrollTrigger:{
            trigger:imgBox[i],
            // markers:true,
            scrub:true,
            start:'top 80%',
            end:'+='+imgBox[i].clientHeight,
        },
        backgroundImage: backgroundImage[i]
    })
}

前の記事

【GSAP】横スクロール、パララックス、時間差出現、ドラッグ操…

次の記事

【Swiper】真ん中に2つのカード+両端が見切れたスライダー…