クリップ表示ギャラリー

使い方

<ClipGallery
  eyebrow="JOURNAL"
  heading="山あいの宿で、季節をめくる。"
  shots={[{ caption: '朝靄の稜線', credit: 'Spring', image: '/images/spring.jpg', alt: '朝靄にかすむ山並み' }]}
/>

• shots は4件を1組として、大・小・縦長・横長の非対称な配置を繰り返します。スマートフォンでは1列です。
• image を省略すると、palette（空・地面・太陽）から山並みの図形を描きます。

動きの仕組み

• mountClipGallery(root) は写真ごとに ScrollTrigger を作り、写真の上端が画面の82%に来たら再生します。
• 窓は clip-path: inset() で上・左・下・右の順に異なる方向から開きます（expo.inOut、1.4秒）。中の写真は1.35倍から等倍へ落ち着きます。
• 写真は窓より少し大きく配置し、写真が画面を横切る間に yPercent を -5 から 5 へ動かします。
• prefers-reduced-motion: reduce や JavaScript なしでは、最初から完成した配置で表示します。

調整する箇所

• 配色は --clip-bg、--clip-ink、--clip-accent で変更できます。
• 開く方向は CLOSED、写真の配置は .clip-gallery__shot--0 から --3 のグリッド指定で調整します。

参考にした傾向

Webデザインクリップ に掲載された国内サイトでよく使われている「マスク／クリップパス・パララックス」の表現を参考に、このカタログ用に一から設計・実装しました。特定サイトのコード・画像・文言・配色は使っていません。

利用条件

このカタログ用に書き下ろした実装で、MITライセンスで公開しています。LICENSE、src/Component.astro、src/motion.ts を取得して利用できます。再配布する場合は LICENSE の著作権表示と許諾文を残してください。