スクロールで動かす(フェード・スライド・拡大・視差)

この記事でできること

  • ✓スクロール演出をオンにして、動きの種類と強さを選べる
  • ✓セクションごとに動きを変える・動かさないようにできる
  • ✓どんな人・どんな画面で動かないかが分かる

スクロール演出とは

LPを下へ読み進めたとき、画面に入ってきたセクションや、コードで作ったセクションの見出し・カード・ボタンが順番にふわっと現れる演出です。コードを書かずに設定だけで付けられます。

  • 画面に 2割 入ったところで動きます
  • 一度動いたところは、上に戻ってももう一度は動きません
  • 最初の画面(ファーストビュー)は、読み込み中の演出が消えてから動きます

設定する場所

  1. プロジェクトを開く
  2. 「プロジェクト設定」 を開く
  3. 「見せ方」の 「スクロールで動かす」 セクションへ

スイッチをオンにし、動きの種類と強さを両方選ぶと保存されます(どちらかが未選択のあいだは保存されず、LPにも出ません)。

動きの種類

種類動き
ふわっと出る透明から、その場で現れる
下から上へ少し下から、浮き上がるように現れる
横から少し左から、スライドして現れる
拡大少し小さい状態から、元の大きさになる
視差文字の無い背景が、スクロールよりゆっくり動く(中身はふわっと出る)

💡 視差は文字の無い背景だけが動きます。いまはコードで作ったセクションの背景画像が対象です(背景画像が無いセクションは、ふわっと出るだけです)。写真・絵で作った画像のセクションは、画像に文字が入っているため動かさず、ふわっと現れます。

強さ

強さ動く時間動く距離順番に出る間隔視差
控えめ0.4秒16px0.06秒スクロールの 10%
標準0.6秒24px0.1秒スクロールの 20%
はっきり0.8秒40px0.15秒スクロールの 30%

セクションごとに変える

編集画面で、各セクションの上にある 「動き:」 から選びます(スクロール演出がオンのときだけ出ます)。

  • LPの設定どおり … 設定画面で選んだ種類で動く
  • ふわっと出る〜視差 … このセクションだけ別の動きにする
  • 動かさない … このセクションは最初から表示する

動かない場合

  • 端末の設定で「視差効果を減らす」「動きを減らす」を選んでいる人には動かさず、最初から表示します
  • JavaScript が使えないブラウザでも、中身は最初から表示されます
  • 以前に作ったコードのセクションも動きます(中の要素は上から順番に現れます)。作り直すと、見出し・カードごとの動きがより細かくなります

関連記事

この記事は役に立ちましたか?