スクロール演出
スクロールに合わせて見せる順番を作る
GSAP ScrollTrigger／無料（全プラグイン）
何が変わったか
見学会のLPは、上から下に一度だけ読まれます。 何をどの順で見せるかは、こちらで決められるはずなのに、 以前は「全部同時に置いてある」状態でした。読む人が自分で順番を決めるしかない。
スクロール量と中身を結ぶと、順番を設計できます。 写真を見せてから言葉を出す、言葉を残したまま写真だけ替える、といったことが決められる。
下の枠の中を、スクロールしてみてください。
玄関を入ると、土間がそのまま続く。 光は、南からではなく東から入る。 台所に立つと、庭が正面にある。
↑ この枠の中をスクロールします
いまはスクロールに追従しています。 指を止めれば絵も止まる。切り替えると、ある位置で1回だけ出るふつうの動きになります。
違いは「なめらかかどうか」ではありません。 追従は、読む速さを読む人が決められます。 ゆっくり読みたい人はゆっくり転がせばゆっくり進む。 「出るだけ」は、こちらが決めた0.8秒で勝手に進みます。
ただしページ全部を追従にすると、逆に読めません。 使うのは1ページに1〜2か所です。
どんなものか
GSAP という、動きを書くための道具です。中の ScrollTrigger が 「スクロール位置と動きを結ぶ」担当をしています。
2024年に全部のプラグインが無料になりました。 以前は年間で費用のかかる部分があり、そこが一番使いたい部分でした。今は全部使えます。
GSAPが要るのは、同じページで動きが5つ6つ重なって、順番と重なりを管理しはじめたときです。 自分で書くと、そこから急に壊れます。道具の値打ちは「できること」ではなく「壊れないこと」の側にあります。
実際にやってみて、つまずいたところ
1. スクロールにそのまま結ぶと、カクつく
スクロール位置をそのまま位置に変換すると、指の動きがそのまま絵に出ます。 スマホは指がガタつくので、絵もガタつきます。
直し方は1行です。目標値に一気に合わせず、毎フレーム少しずつ近づけます。
// 悪い: スクロール量をそのまま入れる
y = progress * 200;
// 良い: 目標に少しずつ寄せる（0.1 は追いつく速さ）
target = progress * 200;
y += (target - y) * 0.1;これだけで、指のガタつきが絵に出なくなります。 0.1 は「10フレームかけて追いつく」くらいで、0.06〜0.14 の間で調整します。 小さくするほど、ぬるっと遅れてついてきます。
2. スマホで高さがずれる
画面いっぱいの高さを 100vh で指定すると、
スマホでアドレスバーが出たり消えたりするたびに高さが変わって、動きの位置が飛びます。
スクロールの途中で急に絵が跳ねる。
100dvh に変えると直ります。この1文字で終わる話に、最初は半日使いました。
3. 裏タブに回すと止まる（3回踏んだ）
これは動きを作るとき全般の話です。 ブラウザは、見えていないタブの描画を止めます。 毎フレーム呼ぶ仕組みが1回も動かないので、動きは開始位置で固まったままになります。
作っている最中に「動かない」と何度も勘違いしました。 3回とも、原因はコードではなくタブが裏だったこと。 今は、動きを確認するときは必ずそのタブを前に出してから見ます。
4. 動きを止めたい人がいる
端末の設定で「視差効果を減らす」を入れている人がいます。 乗り物酔いに近い症状が出る人がいるためで、その設定が入っていたら動かさないのが決まりです。
1行足すだけです。上の実演にも入れてあります。
@media (prefers-reduced-motion: reduce) {
.shot { transform: none !important; }
}どこに入れて、どこに入れないか
| 場所 | どうするか | 理由 |
|---|---|---|
| 一番上の写真 | 追従で1つだけ | ここが看板。ここだけは手をかける |
| 本文の見出し | 出るだけ・0.6秒 | 読む速さを邪魔しない |
| 本文 | 何もしない | 読むところを動かさない |
| 写真の並び | 出るだけ・少しずつ遅らせる | 3枚以上あるときだけ |
| 申込みのボタン | 何もしない | 押したい瞬間に動くと押せない |
| 数字（実績など） | 出るだけ | カウントアップは古く見える |
迷ったら「何もしない」を選びます。 動かさなくて困ったことは、今のところありません。
どこで使っているか
WinWinHOME の見学会LP。一番上の外観写真だけを追従にして、 下に続く見出しは「出るだけ」に統一しました。ジャストプラスさんのイベントLPにも同じ形で入れます。
入れてよかったのは、動きそのものより「どこを動かさないか」を先に決めるようになったことです。 道具を持つと、置く場所を選ぶようになります。