#85 カルーセルを縦スクロールだけで動かす

2024年1月6日 22:39

カルーセルは横にフリックしたり、インジケータを動かしてスライドを動かしたりするけど、縦スクロールだけで動かしてみる。

GSAP（GreenSock Animation Platform）というGreenSock社のアニメーションライブラリを使うと、実現できるらしい。

参考：

LIGさんのデモ ↓

わいのデモ
(最初のスライドが中央に来て最後のスライドが中央でストップように調整)

真ん中にする方法

.slide_list {
        position: absolute;
        top: 0;
        left: calc(50% - 150px);
        /*横並びのため*/
        display: flex;
        column-gap: 1rem;
    }

真ん中始まりにしたいので、left:50%にするけど、スライド(300px)の半分 -150pxをすることで、スライドの真ん中が真ん中に来るようにした。

const listWrapperEl = document.querySelector('.slide_wrapper');
const listEl = document.querySelector('.slide_list');
(略)
x: () => -(listEl.clientWidth - (listWrapperEl.clientWidth/2-300)),

xはx方向の意味。　-listEl.clientWidth　でマイナス方向（左方向）にカルーセルの長さ分動く
でも、それだと、カルーセルが全部画面外の左に隠れてしまうので、そこから　-(listEl.clientWidth - listWrapperEl.clientWidth)で、listWrapperEl.clientWidth（カルーセルを囲んでいる要素）を引いて、画面右端に、最後のスライドが来るように調整する。

そして、中央に寄せたいので、listWrapperEl.clientWidth/2　と、囲んでいる要素の半分だけ引くようにする。
-(listEl.clientWidth - (listWrapperEl.clientWidth/2)

でも最初に150px左に寄せていたので、これだけだと最後の要素が真ん中にこないので、さらにスライド1枚分引く
-(listEl.clientWidth - (listWrapperEl.clientWidth/2-300)
って、ことかな。複雑すぎる。

わいのデモ失敗版
カルーセルの上にアコーディオンのようなページの高さやスクロール量が変わる要素を入れてしまうと、カルーセルのスクロール後に画面のちらつきが発生する。

このUIを使うときは、あまり複雑ではない作りにしたほうがよさそう。

参考：clientWidth

#85 カルーセルを縦スクロールだけで動かす

いいなと思ったら応援しよう！