Bricks 1.9.3 でスクロールスナップが導入されたことにより、洗練されたスクロール効果を持つ Web ページをより簡単に作成できるようになりました。
この記事は、Bricks オフィシャルサイトの動画内容をわかりやすく解説したものです。
スクロールスナップとは
スクロールスナップとは、スクロール操作の終わりで特定の位置に “吸い付くように” 止まるための CSS の仕組みです。
セクションを 1 画面ずつ見せたい LP や、横並びのカードを 1 枚ずつ見せるカルーセルでよく使われます。
Bricksのスクロールスナップの設定方法
では、設定を見ていきましょう。
まずは、いくつかの 高さ 100vh のセクションを作成します（下図参照）。
必ず 100vh である必要はありませんが、スクロールスナップを使用したサイトの多くが 100vh のセクション構成になっています。
続いて、左上の歯車アイコン（設定）から ページ設定 を開きます（下図参照）。
ページ設定内の「スクロールスナップ」タブに、スクロールスナップの全体設定があります（下図参照）。
スクロールスナップのタイプ（2種類）
● Mandatory
スクロール後、必ずスナップポイント（セクションの位置）でピタッと止まります。
● Proximity
セクション位置に “近づく” と止まりますが、スクロールの 勢い が強いとスナップしないこともあります。
自然なスクロール感を残したい場合に向いています。
配置（Alignment）
100vh ではない高さのセクションを使う場合、どの位置で止めるか をここで指定します（下図参照）。
例：配置を「start」にして、パディングを「20vh」にすると、
画面上から 20% の位置でスナップして止まります。
停止（Stop）
スクロールスナップの「停止」設定では、強制力を選べます。
- Normal（通常）：近ければ止まるが強制ではない
- Always（常に）：必ずここで止まろうとする（強制スナップ）
コンテナのスクロールスナップ
Bricks の コンテナにも個別のスクロールスナップ設定があります（下図参照）。
個別に挙動を制御する場合はこの設定を使います。
ページ全体には適用せず、特定のコンテナだけ横スクロールスナップにするといった用途で使用します。
セクションごと／コンテナごとのスナップ設定
例えば、横方向に 3 つのコンテナを並べ、それぞれを 1 つずつスナップさせる設定も可能です（下図参照）。
- 横スクロールのカルーセル
- カードを 1 枚ずつ表示する UI
などで活躍します。
まとめ
近年やや減っている印象もあるスクロールスナップですが、デザイン次第では非常に効果的なギミックです。
Bricks 1.9.3 で簡単に設定できるようになったので、ぜひ一度試してみてください。
