パララックスとは
パララックス（parallax）とは、「視差」という意味です。
では、「視差」とは、どう言う意味かと言うと、「ものを観察する場合に、見る場所や見る条件によって見え方に差ができること」を言います。
分かりづらいですが、「動く方向が違う」「動くスピードが違う」「遠近差がある」といった効果を指します。
おしゃれなデザインを採用しているホームページなどでよく採用をされている技法になります。
今回作り方を説明するのは次の「パララックスサンプルページ」のような背景画像を固定したままスクロールをするパララックスの作り方を説明します。
パララックスサンプルページ
最新の投稿一覧
パララックスの作り方
- ブロック挿入ツールより「カバー」を選択します。
- メディアのアップロードが必要な場合は「アップロード」ボタンを、「メディアライブラリ」より選択する場合はメディアライブラリをクリックしてメディアを選択し、メディアを配置します。
- 右側のメディア設定にある「固定背景」をONにます。
固定背景をONにするとスクロールしても背景はスクロールされない「視差」が発生します。
必要に応じて行う設定
他、必要に応じて以下の設定を行います。
オーバーレイ（不透明度）の設定
デフォルトの状態だと、画像の上にオーバーレイがもう一層あり、不透明度が50(%)が設定されているため暗めに表示されています。
オーバーレイが不要な場合は0を設定します。
全幅（パララックスの画像を画面の幅いっぱいにする場合）
パララックスの画像を全幅にしたい場合は、「配置」より「全幅」を選択します。
画像の高さの設定
画像の高さの設定は、「カバー画像の最小の高さ」より設定ができます。
スマホサイズになった場合の画像の中心の選択方法
レスポンシブでスマホサイズになった際に、画像が思ったように表示されないことがあります。そのような場合は、「繰り返し背景」にチェックを入れると「焦点ピッカー」が表示されるので、「焦点ピッカー」で中心を調整します。
最後に
いかがだったでしょうか？
もっと凝ったパララックスを作成したい場合は、プラグイン等を使用する必要がありますが、今回のようなパララックスの場合はブロック挿入ツールだけで作成ができることが分かったと思います。
ぜひ、自分のホームページにも導入してみてください。
