カーソルとポインタ · ポインタが触れると
画像のトレイル图片拖尾
- 一列を残す
- だんだん小さい
- ページをめくるよう
ポインタがサムネイルの列をなぞると、後ろに小さな画像が一列残ります。一枚ごとに小さく薄くなり、最後は消えます。カーソルプレビューとの違いは数です。プレビューは常に一枚、トレイルは連なりです。前者は「今これ」、後者は「今これらを通った」と言います。
使いどころ
作品集、ギャラリー、メニューなど「中身が画像そのもの」の閲覧場面に使い、デスクトップで最も映えます。行が文字の場合は使わないでください(文字の塊が連なると散らかります)。タッチも不可です。指はそこまで速く払えず、トレイルが伸びません。
パラメータ
spawn every 60ms · life 700ms · transform: scale 1→0.42 · opacity 1→0 · linear · 16-item pool
レシピ
画像のトレイル → spawn every 60ms · life 700ms · transform: scale 1→0.42 · opacity 1→0 · linear · 16-item pool
AI に渡す一文
画像のトレイルを作ってください。ポインタが動いている間、60ms ごとにその位置へ小さな画像を置きます。各画像は 700ms で scale(1) から scale(0.42) へ縮み、opacity が 1 から 0 へ。16 個のプールを使い回し、毎回 DOM を作らないでください。生成間隔が肝心です。速すぎると線に潰れ、遅すぎると数枚だけが寂しく残ります。