Lab

一覧から詳細へ、写真がつながるページ遷移

写真の一覧から詳細ページへ移るとき、押した写真がそのまま大きくなってつながる。山の写真の記録集を想定した自主制作です。

使えそうな案件

制作実績や商品の一覧から、詳細ページへ移るところ。

使った技術

  1. 01Barba.js(ページの切り替え)
  2. 02GSAP Flip
  3. 03Three.js(写真の表示と網点の演出)
  4. 04ScrollTrigger・ScrollSmoother
  5. 05SplitText

見え方の違い

ブラウザの「戻る」
一覧のスクロール位置に戻り、写真も一覧の元の場所へ戻ります。

作ってみて分かったこと

ページが切り替わるあいだも押した写真を画面に残しておき、切り替わったあとの位置へFlipで動かしています。戻るときは一覧のスクロール位置を覚えておき、写真を元の場所へ戻しています。

参考にした記事:Building a Scroll-Revealed WebGL Gallery with GSAP, Three.js, Astro and Barba.js(Codrops)