media
Polaroid drop / Scattered photo drop / Photo pile reveal
01Demo触って、数値を決める
写真1枚の高さに対する割合。10〜15%で「上から置いた」と読める。30%を超えると置くではなく落とすに見え、着地の行き過ぎが跳ね返りになる。
各写真の着地角度の上限。±3〜5degが手で並べた癖に見える。0で整列した額装になり、8degを超えると散らかった印象が勝つ。
0.45〜0.6sが自然。0.3sを切ると行き過ぎが見えずに瞬間表示になり、1sを超えると宙に浮いている時間が長く見える。
前の写真が着地しきる前に次を置き始める間隔。60〜90msで「次々と置かれる」リズムになる。0で全部同時に降り、150msを超えると1枚ずつ待たされる。
02Prompt数値はスライダーと連動
03 Vocab この動きを構成する語彙
overshoot easing — cubic-bezier の y を1より大きくした曲線(例 0.25, 1.3, 0.5, 1)。終点を少し越えて戻るので、置いた物がわずかに沈んで止まる感触になる。
stagger — 複数要素の開始を一定間隔でずらすこと。animation-delay に並び順×間隔を入れる。
animation-fill-mode: both — 遅延中は開始状態(透明・浮いた状態)を、終了後は最終状態を保つ指定。無いと遅延中の写真が先に着地位置で見えてしまう。
scatter layout — 格子を基準に位置と角度を少しずつ崩した配置。乱数ではなく固定の係数で崩すと、再表示しても同じ机の上に見える。
04 NG → OK 伝え方の差分
NG
言い方: 「写真がパラパラっと机に置かれる感じでギャラリーを出して」
なぜNG: 「パラパラ」では置く方向も傾きも決まらない。下からのフェードイン＋stagger(＝scroll fade in)か、ランダム角度で毎回散らばり方が変わる実装が返り、着地の行き過ぎと「大きめから縮む」が抜けて手で置いた感じが出ない。
OK
言い方: 「polaroid dropで。opacity 0・translateY(-12%)・scale(1.08)から着地角度のrotateへ、0.55s cubic-bezier(0.25,1.3,0.5,1)、遅延0.12s+i×70ms。角度は±5degの固定係数。transformのみ」
なぜOK: 開始状態(上・大きめ)と着地の行き過ぎをイージングの値で指定し、角度を固定係数にして毎回同じ散らばり方にした。「transformのみ」で並べ直しの重さも防げる。