初回の読み込み
- きっかけ
- イージング
- --ease-out cubic-bezier(0.16, 1, 0.3, 1)
- 動きを減らす設定
使っている場所
セッションに一度だけ、グリッドの線が上から下へ、ヘッダーの罫線が左から右へ引かれ、ページの見出しが浮かびます。内容は隠れないので、読むために待たされることはありません。
ページ単位の動き。開いたとき、ページを移るとき、スクロールするとき。
使っている場所
セッションに一度だけ、グリッドの線が上から下へ、ヘッダーの罫線が左から右へ引かれ、ページの見出しが浮かびます。内容は隠れないので、読むために待たされることはありません。
使っている場所
前のページが消え、次のページが少し浮かび、ヘッダーの線が引き直されます。400ms以内で、ナビゲーションは動きません。「ここでもう一度」はアドレスのクエリだけを変えるので、このページを離れずに再生できます。
使っている場所
線の図はスクロール位置に合わせて描かれ、戻ると消えていきます。時計の役目は読み手のスクロールが担うので、長さもカーブもありません。
使っている場所
ページに一枚だけ、3割ほどが見えたところで、左から右へのマスクのワイプで一度だけ現れます。最初から完成した状態で描画されているので、JavaScript がなくてもそのまま見えます。