fbpx

Elementor スクロールスナップを使う方法

『スクロールスナップ』を皆さんは知っていますか?

スクロールスナップはウェブサイトをスクロールしたときに、スナップをきかせたように画面がスクロールし、セクションごとにピタッと画面が静止する機能のことで、これをElementorで簡単に実装することができます!

そのためにはまずスクロールスナップを設定で有効にする必要があります。

この記事ではElementorの設定でスクロールスナップを有効にする方法、スクロールスナップの各種設定の仕方を紹介していきます。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

また、スクロールスナップを使う方法を動画でご覧になりたい方はこちらをどうぞ!

スクロールスナップ機能を有効化する方法

手順1:ダッシュボードメニューのElementorの『設定』をクリック

①まず、ダッシュボードのメニューのElementor内にある『設定』をクリックします。

手順2:『実験中』をクリック

②『実験中』のタブをクリックします。

手順3:Scroll Snapを『有効』にする
手順4:『変更を保存』をクリック

③『Scroll Snap』を『有効化』します。

④『変更を保存』をクリックします。

Scroll Snapのタイトルの横の丸が緑色になればOKです。

※なお、Scroll Snapの説明に『ベータ版』と書いてありますが、きちんと使うことができますので心配いりません。

スクロールスナップをサイトに実装する方法

手順1:設定(ギアマーク)をクリック
手順2:『高度な設定』をクリック

上記はElementorの『固定ページ』の編集画面です。

①画面左下の『設定』(ギアマーク)をクリックし、『固定ページ設定』を開きます。

②『高度な設定』をクリックします。

『Scroll Snap』を『オン』にしたときの表示画面

③『Scroll Snap』のセクションの『Scroll Snap』のスイッチを『オン』にします。

これでスクロールスナップの実装は完了です!

以下はデフォルトの設定の状態のスクロールスナップの様子を映した動画です。

スクロールスナップの編集

このセクションでスクロールスナップの各種設定の編集の仕方を紹介します。

Snap Position

Spap Positionのエディターとリスト一覧(上・中央・下)

『Snap Position』は画面をスクロールしたときにセクションを画面のどこに配置するかの設定です。

以下から配置を選択できます。

  • 上(デフォルト)
  • 中央

Snap Positionを『上』に設定したときの表示画面

Snap Positionを『上』にすると、画面をスクロールしたときにセクションの上部が画面の上部に重なるようにに表示されます。

中央

Snap Positionを『中央』に設定したときの表示画面

Snap Positionを『中央』にすると、画面をスクロールしたときにセクションの中央が画面幅の中央に重なるように表示されます。

Snap Positionを『下』に設定したときの表示画面

Snap Positionを『下』にすると、画面をスクロールしたときにセクションの下部が画面の下部に重なるようにに表示されます。

Scroll Padding

Scroll Paddingの値を『200』(最大値)にしたときの表示画面
※Snap Possitionは『上』

『Scroll Padding』は『Snap Position』で指定された配置の方向へのパディングで、最大200pxまでのスペースを入れることができます。

上記は『Snap Posotion』を『』に設定し、『Scroll Padding』の値を『200』(最大値)にしたときの表示画面です。

この設定は例えばスッティッキーヘッダーなどを使用するときなど、画面上部にスペースが必要な場合にとても有効ですね。

Scroll Paddingの値を『200』(最大値)にしたときの表示画面
※Snap Possitionは『下』

上記はSnap Posotion』を『』に設定し、『Scroll Padding』の値を『200』(最大値)にしたときの表示画面です。

Scroll Snap Stop

Scroll Snap Stopのエディターと機能のリスト(普通・Always)

『Scroll Snap Stop』とは画面スクロールの方法を以下から選択します。

  • 普通(デフォルト):マウスで強めに画面をスクロールしたときにマウスの動きに合わせてスクロールの強さも反映するため、いくつかのセクションがスキップして表示されます。
  • Always:マウスでいくら強めに画面をスクロールしても、マウスの動きとは関係なく必ず一つ一つのセクションで画面がストップするようになります。

こちらはScroll Snap Stopを『普通』にし、実際の画面を強めにスクロールしたときのサンプル動画です。

注意!セクション同士が近いとスクロール時の画面動作がモタモタする

セクション同士の位置が近い編集画面のサンプル

例えば上記画像のようにセクション同士が近い場合、スクロールスナップがそれぞれのセクションで反映してしまい、せっかくスクロールスナップを設定しても挙動がおかしくなってしまうことがあります。

その場合は内部セクションなども含めてサイトを構成するなどの対処が必要です。

上記はセクション同士が近い部分をスクロールしたときにどのようにモタつくかを映したサンプル動画です。

まとめ

スクロールスナップを使うと、特に縦長のサイトが一段とかっこよくなりますね!

スクロールスナップはElementorの設定を有効にすればで簡単に導入できるのでぜひ、以下の点を注意して、試してみてはいかがでしょうか?

  • 強めの画面スクロールで、いくつかのセクションが飛ばされて表示されてしまうのが嫌なら、『Scroll Snap Shot』を『Always』に設定する。
  • ページにセクション同士が近い部分があると、セクションごとにいちいちスクロールが止まってしまうため、内部セクションなどを併用しながらページ制作をした方がいい。
  • スティッキーヘッダーを使用する場合はScroll Paddingを使用してセクション上部に必要なスティッキーヘッダーに必要なスペースを空けのるもおすすめ。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

こんにちは、ナオミです!

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴18年です。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントを残す

メールアドレスが公開されることはありません。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通