ローディング・カーテン

使い方

<LoadingCurtain
  brand="NORTH"
  lines={['Make it', 'quietly bold.']}
  lead="説明文"
  once
  minDuration={1.8}
  shutters={5}
/>

• once を付けると、同じブラウザのセッションでは2回目以降を表示しません。
• minDuration はカウントの最短秒数、shutters は幕の枚数です。

動きの仕組み

• コンポーネント内の小さなインラインスクリプトが、動きを減らす設定がオフのときだけ data-loading を付けてローディング画面を出します。JavaScriptなしでは最初からヒーローが表示されます。
• mountLoadingCurtain(root) は90まで minDuration 秒で数え、残りの10はページの load を待ってから数えます。
• そのあとブランド名が上へ抜け、幕が中央から外へ順に上がり（expo.inOut）、見出しが行ごとに下から立ち上がります。
• 終了後は data-loading を外すため、ローディング画面は操作を妨げません。読み上げ向けには「読み込み中」の状態を伝えます。

調整する箇所

• 配色は --curtain-loader-bg、--curtain-loader-ink、--curtain-accent で変更できます。
• 退場の順番や時間は motion.ts の outro タイムラインで調整します。

参考にした傾向

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

利用条件

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