Elementor でサイトを作っていて「背景画像がただ置いてあるだけで退屈…」と感じていませんか？
そんな時におすすめなのがパララックス（視差効果）です。スクロールした時に、手前の文字と奥の背景画像が違うスピードで動くことで、サイトに奥行きと立体感が生まれます。
今回は、無料版でも今すぐできる一番簡単なパララックスの設定方法を解説します！
パララックスとは？
パララックスとは、視差（見る位置によるズレ）を利用したWebデザインの定番テクニックです。
手前にあるテキストや画像などの要素は通常のスピードでスクロールさせつつ、奥にある背景画像を固定したり、ゆっくり動かしたりすることで、まるで3Dのような奥行きを感じさせることができます。サイト全体がリッチで洗練された印象になるため、トップページのファーストビューや、目を引きたいセクションまたはビジュアルブレイクなどでもよく使われます。
Elementor でできる背景の「固定」設定
Elementor無料版でも、一番オーソドックスな疑似パララックスを一瞬で作ることができます。
-
背景画像を設定したいコンテナ（またはセクション）を選択します。
-
左パネルの [ スタイル ] タブを開き、背景に好きな画像をアップロードします。
-
画像を設定するとすぐ下に表示される「添付（Attachment）」のプルダウンから、「固定（Fixed）」を選択します。
たったこれだけです！画面をスクロールしてみてください。背景画像がその場にピタッと固定され、手前の文字だけが通り過ぎていく美しい視差効果が完成しています。
スマホ表示での注意点（iOSの仕様）
とても簡単な固定（Fixed）設定ですが、一つだけ重要な注意点があります。それは、iPhone（iOS）の Safari や Chrome などのブラウザでは、この固定設定が機能しないことが多いという点です。
スマホで見た時に画像が極端にドアップに拡大されて画質が荒れたり、固定されなかったりする特有の仕様があります。そのため、編集画面のレスポンシブモードでスマホ表示に切り替え、スマホの時だけ背景オーバーレイを設定したり、そもそも画像を別の素材に差し替えるなどの対応が、実務でもよく使われる安全な設定方法です。
まとめ
- パララックスを使うと、サイトに奥行きとプロっぽさが出る。
- [ スタイル ] タブの背景設定で、添付を「固定（Fixed）」にするだけで完成。
- iPhonen などスマホでは固定が効かない。
ただの背景画像が、スクロールに合わせて動くダイナミックな装飾に早変わりします。サイトの雰囲気がガラッと変わるので、ぜひ試してみてくださいね！
