スクロール演出とは
LPを下へ読み進めたとき、画面に入ってきたセクションや、コードで作ったセクションの見出し・カード・ボタンが順番にふわっと現れる演出です。コードを書かずに設定だけで付けられます。
- 画面に 2割 入ったところで動きます
- 一度動いたところは、上に戻ってももう一度は動きません
- 最初の画面(ファーストビュー)は、読み込み中の演出が消えてから動きます
設定する場所
- プロジェクトを開く
- 「プロジェクト設定」 を開く
- 「見せ方」の 「スクロールで動かす」 セクションへ
スイッチをオンにし、動きの種類と強さを両方選ぶと保存されます(どちらかが未選択のあいだは保存されず、LPにも出ません)。
動きの種類
| 種類 | 動き |
|---|---|
| ふわっと出る | 透明から、その場で現れる |
| 下から上へ | 少し下から、浮き上がるように現れる |
| 横から | 少し左から、スライドして現れる |
| 拡大 | 少し小さい状態から、元の大きさになる |
| 視差 | 文字の無い背景が、スクロールよりゆっくり動く(中身はふわっと出る) |
💡 視差は文字の無い背景だけが動きます。いまはコードで作ったセクションの背景画像が対象です(背景画像が無いセクションは、ふわっと出るだけです)。写真・絵で作った画像のセクションは、画像に文字が入っているため動かさず、ふわっと現れます。
強さ
| 強さ | 動く時間 | 動く距離 | 順番に出る間隔 | 視差 |
|---|---|---|---|---|
| 控えめ | 0.4秒 | 16px | 0.06秒 | スクロールの 10% |
| 標準 | 0.6秒 | 24px | 0.1秒 | スクロールの 20% |
| はっきり | 0.8秒 | 40px | 0.15秒 | スクロールの 30% |
セクションごとに変える
編集画面で、各セクションの上にある 「動き:」 から選びます(スクロール演出がオンのときだけ出ます)。
- LPの設定どおり … 設定画面で選んだ種類で動く
- ふわっと出る〜視差 … このセクションだけ別の動きにする
- 動かさない … このセクションは最初から表示する
動かない場合
- 端末の設定で「視差効果を減らす」「動きを減らす」を選んでいる人には動かさず、最初から表示します
- JavaScript が使えないブラウザでも、中身は最初から表示されます
- 以前に作ったコードのセクションも動きます(中の要素は上から順番に現れます)。作り直すと、見出し・カードごとの動きがより細かくなります