パララックス スクロールの設定とトラブルシューティングのヒントを確認します。

Brineファミリーのテンプレートは、ヘッダー画像にパララックス スクロールと呼ばれる特別な視覚効果を適用しています。パララックス スクロールでは、背景画像が前景のコンテンツよりもゆっくりと移動するため、奥行きと没入感があるような錯覚が生じます。

バージョン7.1で同様のパララックス スクロール効果を実現するには、背景画像の効果を使用します。

Burkeテンプレートでのパララックス スクロールは次のように動作します。

始める前に

• テンプレートがパララックス スクロールをサポートしているかどうかについては、Brineファミリーのテンプレートのリストをご覧ください。
• パララックス スクロールを有効にすると、サイト上のすべてのバナーに影響します。
• パララックス スクロールはモバイルで機能します。
• 廃止されたMarqueeファミリーでもパララックス スクロールがサポートされています。詳しくは、Marqueeテンプレートのガイドをご覧ください。
• パララックス スクロールとアクセシビリティについて詳しくは、「オーディオ、画像、動画にアクセスしやすくする」を参照してください。

サポートされているページ

パララックス スクロールは、バナーをサポートしているページで利用可能です。

• インデックス ページ (レイアウト ページ セクションの後ろの背景画像)
• レイアウト ページ
• ストア ページ
• イベント ページ
• アルバム ページ
• ブログ ページ
• ギャラリーページ

パララックス スクロールを有効または無効にする

サイト上のバナーでパララックス効果が得られない場合は、Brineファミリーのサイト スタイルで有効にします。

1. [サイト スタイル] パネルを開きます。
2. [メイン: オーバーレイ] セクションまで下にスクロールします。
3. [パララックスを有効化] にチェックを入れます。
4. トリミングを最小限に抑えるには、[パララックス スマート クロップ] にチェックを入れることをおすすめします。
5. [保存] をクリックします。

サイトのパララックス スクロールを無効にする場合、同様の手順を実行しますが、[パララックスを有効化] のチェックは外します。

アイキャッチ画像を追加する

パララックス効果を実現するには、ページまたはセクションにアイキャッチ画像を追加します。

• ページにアイキャッチ画像を追加すると、バナーが作成されます。
• インデックス コンテンツ セクションにアイキャッチ画像を追加すると、背景画像が作成されます。

パララックス効果が得られない場合は、有効になっていることを確認してください。

効果を高める

パララックス スクロールの効果を高める方法はいくつかあります。

コンテンツを混在させる

パララックス スクロールする画像と、パララックス スクロールしないコンテンツや画像を混在させます。より速く移動するコンテンツは、パララックス画像の上をスライドしているように見えます。

たとえば、インデックスでは、パララックス スクロールするコンテンツ セクションと、パララックス スクロールしないギャラリーのインデックス セクションまたは背景画像のないコンテンツ セクションを混在させることができます。

オーバーレイ コンテンツを追加する

パララックス スクロールを強化するもう1つの方法は、テキスト、ボタン、またはその他のコンテンツをオーバーレイとして画像に追加することです。オーバーレイ コンテンツは、ページの他の部分と同じ速度で、画像よりも速くスクロールされます。Brineファミリーでは、ブロックを使用することでオーバーレイ コンテンツを追加できます。

• バナー - イントロダクション エリアにコンテンツを追加します。
• インデックス ページ セクション - ページのコンテンツ エリアにコンテンツを追加します。

カラー フィルターを追加する

サイト スタイルの [メイン: オーバーレイ] セクションの [オーバーレイの色] を使用して、サイト上のすべてのバナーにカラー フィルターを追加できます。

切り抜き

切り抜きがパララックス画像にどのように影響するかは、サイトを長方形の穴が空いた紙と考えるとわかりやすくなります。パララックス画像はその下にある別のレイヤーであり、紙の穴を通してのみ見ることができます。

紙が画像よりも速くスクロールするには、画像が穴よりも長い必要があります。紙を上下に動かすことで、画像の上下にある余分なスペースが表れます。

このため、切り抜きや焦点を変更しても、パララックス スクロール画像の位置には目立った影響が表れない可能性があります。サイトは、画像の両側に余白を設けることで、パララックス効果を実現するように設計されています。

ヒント: 左右のトリミングを最小限に抑えるには、サイト スタイルの [パララックス スマート クロップ] にチェックを入れます。

スクロールに関する問題

パララックスを有効にしたときにスクロールの問題が発生した場合は、ページのサイズを小さくする必要がある場合があります。特に合計ページ サイズが15MB以上の場合、ブラウザーでパララックス スクロール ページの読み込みに時間がかかることがあります。それでもスクロールが正しく表示されない場合や、ページ サイズを小さくできない場合は、パララックスを無効にすることを検討してください。