スクロール · スクロールで変わる
スクロールのコマ送り滚动逐帧序列
- コマ単位で飛ぶ
- フィルムを引く感じ
- 中間がない
動画に見えますが、実体は事前レンダリングした静止画の束です(デモでは実商品の写真 36 枚)。下へスクロールすると 1 コマ進み、戻すと 1 コマ戻り、止めれば止まります。コマ単位で飛ぶので「半コマ」は存在しません。
使いどころ
製品の 360 度ターンテーブル、工程、組み立てデモに向きます。動画にするには重く、ページ送りにするには軽すぎる内容です。全コマを先読みする必要があり、コマ数が多いほど重くなるので、数十秒の映像には使わないでください。
パラメータ
frames 36 · step = (section height − viewport) / (frames − 1) · index = round(progress × (frames − 1)) · swap image, never interpolate
レシピ
スクロールのコマ送り → frames 36 · step = (section height − viewport) / (frames − 1) · index = round(progress × (frames − 1)) · swap image, never interpolate
AI に渡す一文
この区間をコマ送りにしてください。N 枚の事前レンダリング画像を用意し、スクロール位置を整数のコマ番号に量子化し(index = round(進捗 × (N − 1)))、その番号の画像に差し替えます。補間しないでください。イージングも不要です。1 コマあたりのスクロール量が揃うように区間の高さを決めます。