入れ替わる・寄っていく・コマ送りで進む・マウスで動く・見比べる・読み込む、といった写真や絵の動きを10種類の型に分け、AIへの指示文・試せる見本・コードを載せています。見本の写真は、図形で描いた架空の風景や商品です。見本の下で時間や量を変えると、指示文とコードも同じものに変わります。
画像の動きはどの型を選ぶか
画像の動きは、まず「自動で動き続けるか」「マウスや指に応えるか」で分けて考えます。自動で動き続ける型には止めるボタンと画面の外で止める仕組みが要り、マウスに応える型にはスマホでどうするかを決めておく必要があります。写真そのものが重いので、読み込みと描き直しの重さにも気を配ります。
| こんなとき | 向いている動き | 近い型 |
|---|---|---|
| トップの大きな写真を、数枚静かに入れ替えて見せたい | 写真が重なりながら入れ替わる（クロスフェード） | 無限カルーセル・ファーストビュー（スライダー型） |
| 1枚の背景写真に、映像のようなゆっくりした動きを出したい | 止まった写真がゆっくり寄りながら流れる（ケンバーンズ） | — |
| 製品のふたが開く・回るといった変化を、スクロールに合わせて見せたい | スクロールに合わせて連番の絵がコマ送りで進む（画像シーケンス） | スクラブ |
| スクロールに合わせて写真に近づき、画面いっぱいに広げたい | スクロールの動きのスクロールズーム | — |
| 絵に奥行きを出し、マウスでのぞきこむように見せたい | マウスの位置で手前と奥の絵が違う量ずれる（マウスパララックス） | スクロールのパララックス |
| 水辺や光の写真に、触れたときの遊びを足したい | マウスを重ねると写真が水面のように揺らぐ（ディストーション） | — |
| 施工事例や作品の一覧で、指している1枚を目立たせたい | モノクロの写真が、重ねるとカラーに戻る（グレースケールホバー） | ホバーの動き |
| 商品の細かな作りや質感を、写真の上で拡大して見せたい | 商品写真の上で虫眼鏡の円が拡大して見せる（ルーペズーム） | ギャラリー（ライトボックス型） |
| 施工の前と後を、同じ位置で重ねて見比べてもらいたい | 2枚を重ね、つまみを動かして見比べる（ビフォーアフタースライダー） | ギャラリー（ビフォーアフター型） |
| 写真の多いページで、読み込みの間も写真の雰囲気を見せておきたい | ぼやけた絵が先に出て、本物が届くとくっきり入れ替わる（ブラーアップ） | スケルトンローディング |
| 1つのセクションの背景に、静かな動きを少しだけ足したい | 小さな粒が漂い、マウスから少し逃げる（パーティクル背景） | グラデーションアニメーション |
ギャラリーのビフォーアフター型は、2枚を隣に並べて全体の変化を見せるものです。ここのスライダーは2枚を重ね、同じ位置の細かな違いを1枚の中で見比べるものです。スクロールに合わせて写真が大きくなる動きは、スクロールの動きのほうに載せています。
どの型でも守ること
- 自動で5秒を超えて動くものには、止めるボタンを付ける。クロスフェード・ケンバーンズ・パーティクル背景は、
buttonの「止める」を置き、押したら「再開する」に替えます。 - 画面の外では止める。
IntersectionObserverで見張り、見えていない間は入れ替え・アニメーション・requestAnimationFrameを止めます。root: documentを付けると、iframe の中や埋め込みでも同じように見張れます。 - マウスに応える型は、スマホでどうするかを決める。パララックス・揺らぎ・グレースケールはマウスのある画面でだけ動かし、スマホでははじめからカラーにするなど、動かなくても困らない形にします。拡大鏡はタップで使えるようにします。
- 重い描き方は、必要な間だけにする。SVG のフィルターや
filterは動いている1枚だけに付け、止まったら外します。連番の画像は画面に近づいてから読み込みます。 - 動きを控える設定では、止まった絵にする。入れ替えや漂う動きを止め、連番は最後のコマを1枚だけ出します（見本の「動きを控える設定で見る」で確かめられます）。
よくある質問 (FAQ)
前の写真と次の写真を、同時に薄くしているためです。2枚がどちらも半分の濃さになる瞬間に、後ろの背景の色が透けて見えます。前の写真は下に濃いまま残し、次の写真だけを上で浮かび上がらせて、浮かび終わってから前の写真を外すと、暗くならずに入れ替わります。
スクロールに合わせて前後に動かすなら、連番の画像のほうが向いています。動画は好きな位置へ飛ばすと、ブラウザによっては絵が出るまで待たされ、戻すときに引っかかります。連番の画像なら、読み込んでおいたコマを canvas に描くだけなので、どちらの向きにもなめらかに進みます。そのかわり枚数と1枚の重さを絞り、画面に近づいてから読み込みます。
スマホには重ねる操作がないので、動かさずに困らない形にしておきます。ここのコードでは、マウスパララックスと揺らぎはマウスのある画面でだけ動き、グレースケールはスマホでははじめからカラーで出します。拡大鏡だけは、タップで円を出し、なぞって動かし、もう一度タップで消せるようにしています。指でなぞる操作をページのスクロールと取り合わないようにするのが大切です。
止め方と、重さを抑える方法です。「写真をフェードで切り替えて」「マウスで揺らして」だけだと、止める手段がない作りや、画面の外でも動き続ける作り、フィルターを付けたままにする作りになりがちです。ここの指示文は、時間と量を数字で書き、止めるボタン・画面の外・スマホ・動きを控える設定のそれぞれでどうするかと、Crossfade のような英語の一般名も添えています。