使えそうな案件
制作実績や商品の一覧から、詳細ページへ移るところ。
使った技術
- 01Barba.js(ページの切り替え)
- 02GSAP Flip
- 03Three.js(写真の表示と網点の演出)
- 04ScrollTrigger・ScrollSmoother
- 05SplitText
見え方の違い
- ブラウザの「戻る」
- 一覧のスクロール位置に戻り、写真も一覧の元の場所へ戻ります。
作ってみて分かったこと
ページが切り替わるあいだも押した写真を画面に残しておき、切り替わったあとの位置へFlipで動かしています。戻るときは一覧のスクロール位置を覚えておき、写真を元の場所へ戻しています。
参考にした記事:Building a Scroll-Revealed WebGL Gallery with GSAP, Three.js, Astro and Barba.js(Codrops)