スクロールで背景が動く！プロっぽい「パララックス（視差効果）」の作り方（後編）（※Elementor Pro）

前回の基本編では、背景をピタッと固定する視差効果を解説しました。

今回はその後編として、Elementor Proの機能を使ったさらに本格的なパララックスの作り方をご紹介します！ スクロールに合わせて背景画像が「ゆっくりと上下に動く」設定を追加することで、サイトにより滑らかでリッチな奥行きを生み出すことができます。さっそく設定してみましょう！

スクロール効果による本格パララックスとは？

前回の「固定（Fixed）」は画像がその場に留まる仕組みでしたが、Elementor Proに搭載されている「スクロール効果（モーション効果）」を使うと、ユーザーのスクロール量に合わせて画像を好きな速度で動かすことができます。

手前の文字は通常のスピードで上に流れ、奥の背景画像はそれより少し遅いスピードで動くため、映画のワンシーンのような自然で美しい3D空間を演出できるのが最大の特徴です。

背景を上下に動かす設定手順

設定はとても直感的です。背景画像を設定したセクション（コンテナ）を選択して始めましょう。

1. 左パネルの [ スタイル ] タブを開き、背景設定の中にある「Scrolling Effects（スクロール効果）」のスイッチをオンにします。

2. メニューが展開されるので、「Vertical Scroll（垂直スクロール）」の横にある鉛筆マークをクリックします。

3. 「方向」を「上（または下）」に設定します。

4. 「スピード」のスライダーを調整します。

これだけで完了です！プレビュー画面でスクロールし、背景が文字と違う速度で滑らかに動くか確認してみましょう。

より美しく見せるコツ

パララックスを綺麗に仕上げるためには、いくつか押さえておきたいコツがあります。

• スピードは控えめに： スピードの数値を大きくしすぎると、画像が激しく動きすぎてしまい、ユーザーが画面酔いをしてしまう可能性があります。3〜5程度の控えめな数値にすると、上品に仕上がります。

• 画像サイズはカバーに： 画像が動くための余白をしっかり確保するため、背景サイズは必ずカバー（Cover）に設定しておきましょう。

まとめ

• Elementor Proの「スクロール効果」で滑らかなパララックスが作れる。
• [ スタイル ] タブの「垂直スクロール」をオンにし、動く方向とスピードを調整。
• 上品に見せるコツは、スピードを控えめにすること。

この機能を使えば、よくある普通のセクションが、一気に見惚れるデザインにランクアップします。上下のエフェクト以外にも、左右の移動や、拡大などいろいろなエフェクトがあるので一度やってみてサイトに合うエフェクトを選択すると良いと思います。Pro版をお使いの方は、ぜひ取り入れてみてくださいね！