ルービックキューブのように切り替わるダブルスライダー

Motion / Interaction

実装ポイント Focus: 画面を左右に分割し、それぞれが手前と奥へ「逆回転」する3Dキューブカルーセルを実装しました。
左右で独立したスライダーを同期させることで、ユーザーには「1つのまとまった立体キューブが割れて動いている」ようなシームレスで没入感のある視覚体験を提供します。
挑戦 Challenge: 複雑な3Dの計算や逆再生アニメーションをJavaScriptで制御するのではなく、CSSの変形（transform: scaleY(-1)）を用いた視覚的トリックを使用して実装しています。
左右に分割した2つのSwiperインスタンスに対して、JavaScript側で swiperLeft.controller.control = swiperRight;等を指定して相互連携。
ユーザーのドラッグ操作やページネーションのクリックに対して、ズレのない心地よいインタラクションを実現しました。
使用技術 Animation: ・HTML5
・SCSS
・JavaScript (Swiper.js)
詳細 Details: #swiper #Transform設計