Diviで視差を使用するための究極のガイド

公開: 2017-07-25

視差に適したサイズの画像を見つけようとすると、少しイライラすることがあります。標準の背景画像としては見栄えがするかもしれませんが、「視差効果を使用する」を選択するとすぐに画像が膨らみ、何も正しく表示されません。今後この悪化を避けるためには、視差とは何か、視差モードにしたときに画像に何が起こっているのかを理解する必要があります。

今日は、視差がDiviとどのように機能するかを深く掘り下げます。 2つの異なる視差方法を使用するとどうなるか、どのサイズの画像が最適かを正確に説明します。また、カスタムcssハックをいくつか投入して、画像を希望どおりに配置します。

さあ行こう。

視差とは何ですか？

ウェブデザインに関して、視差は一種の二次元アニメーションを使用して本物そっくりの距離と動きの知覚を与える効果を説明するために使用される用語です。これは、Webページ上のさまざまな要素のスクロール速度を変更して、固定点を見ながら距離の錯覚を作り出すことによって実現されます。この手法は、Web以外の場所でもしばらくの間使用されてきました。スーパーマリオブラザーズを覚えていますか？ 80年代にビデオゲーム（ニンテンドーNES）をプレイしたことがある場合、ほとんどのゲームはこの手法を使用して、2D画像のみを使用して動きの印象を与えています。最前線のアイテムは、背景の樹木/山/雲よりも速く移動しました。したがって、よりリアルなモーションを作成します。

この効果は、Diviの真の視差法によく似ています。動きが水平ではなく垂直であることを除いて。

視差がDiviとどのように機能するかを理解する

Diviを使用すると、視差は、セクション、行、列、またはモジュール内の背景画像に非常に簡単に展開できます。視差効果オプションを「はい」に設定してから、視差法（CSSまたは真の視差）を選択するだけです。

CSSメソッド

CSSメソッドは、視差効果のために選択できる2つのメソッドの1つです。あなたのサイトでこの方法をテストするだけで、おそらく何が起こっているのかを推測することができます。効果の作成にCSSのみを使用するため、CSSメソッドと呼ばれます。このメソッドは、CSSを使用して背景画像を所定の位置に固定し、ページ上の他の要素は通常どおりスクロールします。これにより、コンテンツが背景画像の前を移動しているような印象を与えます。

真の視差法

2番目の方法は真の視差と呼ばれます。これは、視差効果の従来の考え方を例示しているためか、「真」と呼ばれています。このメソッドは、CSSとJavaScriptを使用して、ページ上の他の要素よりもわずかに遅いスクロール動作を作成します。これは、背景の動きの遅い画像と最前線の動きの速い要素の間に距離が知覚されるため、よりリアルな動きの表現です。

Diviで視差を有効にするとどうなりますか？

舞台裏で何が起こっているのか理解していない場合、これはイライラする可能性があります。したがって、視差がアクティブになったときに画像に何が起こっているかを正確に知ることは役に立ちます。

CSSメソッドを選択するとどうなりますか？

CSS視差を選択すると、画像はブラウザウィンドウのフルサイズにまたがる絶対位置を持つ新しいdivにラップされます。 Diviでこれを行うCSSクラスとコードスニペットは次のとおりです。

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
/*** This sets the image to fixed when using the CSS method ***/
.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
    background-attachment: fixed;
}

背景サイズは高さと幅が100％の「カバー」に設定されているため、画像は常にコンテナのすべての部分を「カバー」します。この場合、コンテナはブラウザウィンドウです。これは、背景画像がブラウザのウィンドウサイズに合わせて常に拡大および縮小し続けるため、画像の一部が他のコンテンツセクションの背後に隠れることを意味します。

これがページ上部のヘッダーモジュールに追加される通常の背景画像であると想像してください。

画像のアスペクト比は正しく（1920×1080）、1366×766の画面サイズで表示すると、画像のサイズがカバーされ、重なり合うことなくセクションにうまく収まります。画像の下の白い領域は、ページ上の残りのコンテンツです。

これは、画像に視差を選択したときに発生することです。

ご覧のとおり、画像は垂直方向（ブラウザウィンドウの下部に到達するため）と水平方向（画像のアスペクト比を維持するため）の両方で拡大します。黒い四角はモニターを表しているため、黒い四角の内側はすべて視聴者に表示されます。下部の白いコンテンツセクションを半透明にして、背景画像が背後に隠れている場所を確認できるようにしました。スクロールしている間、画像は固定されたままで、他の要素が画像の前で上下に移動します。

真の視差法を選択するとどうなりますか？

True Parallaxを設定している場合、画像は同じCSSクラスの新しいdivにラップされます。

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

ただし、小さなJavaScriptを使用することで、画像の高さと位置は、ブラウザウィンドウのサイズに基づいて、ページを下にスクロールするときに動的に設定されます。背景画像に動的に追加される2つの値は、heightプロパティのpx値とtransformプロパティのtranslate値です。 heightプロパティ値は画像の高さを決定し、transformプロパティtranslate値はx軸とy軸に従ってページ上の画像の正確な位置を決定します。

ブラウザウィンドウが1366×766のパララックス背景画像の画像タグに挿入されるコードは次のとおりです。

    height: 960.8px;
    transform: translate(0px, 220.5px);

transformプロパティの2つの数値に注意してください。これらの2つの数値は、背景画像の位置を制御します。最初の数字（0px）は、x軸に沿って（水平方向に）画像を配置します。 0pxに設定されているため、画像は移動しません。 2番目の数字は、画像をy軸に沿って（垂直方向に）配置します。現在220.5pxなので、画像が220.5pxページに押し下げられていることを意味します。

また、高さの値（960.8px）がブラウザウィンドウの高さ（766px）よりも約200px大きいことに注意してください。これは、ブラウザウィンドウの下部を220.5ピクセル超えてプッシュされる画像に対応するためです。

真の視差法を選択すると、CSS法よりも画像が大きく膨らむことに気付くかもしれません。これは、画像の位置がブラウザの高さの30％だけ引き伸ばされているためです。

通常の背景イラストを覚えていますか？

True Parallaxを選択した後（もちろんスクロールを開始する前）、画像は次のようになります。

ご覧のとおり、画像はブラウザウィンドウの下部を少し超えて引っ張られています。このブラウザウィンドウは約1080×700なのでかなり小さいですが、小さいデスクトップウィンドウで何が起こっているのかをお見せしたいと思います。

真の視差がこれまでのところ画像を引き伸ばすのはなぜですか？

まあ、私の最善の推測は、より大きな画面サイズに対応することです。ブラウザウィンドウが1920×1080の画面サイズに達すると、背景画像がウィンドウの下部を超えて拡張されなくなり、うまく収まります。

真の視差がJavaScriptを使用するのはなぜですか？

True ParallaxがJavaScriptを必要とする主な理由は、スクロール時に背景画像を他の要素とは異なる速度で移動する必要があるためです。マリオブラザーズを覚えていますか？

True Parallaxでは、ブラウザのサイズを大きくすると、JavaScriptを介して高さの値も動的に大きくなり、画像が常にブラウザに対して十分な大きさになるようにします。

ページを下にスクロールすると、移動位置の値（上記の例では220.5px）が増加し、画像の垂直（y軸）位置がページの下に移動します。

上にスクロールすると、移動位置の値が減少し、画像がページに戻ります。ただし、スクロール時に画像が他の要素とは異なる速度で押し下げられたり引き上げられたりするため、真の視差効果が得られます。

どのような画像を使用する必要がありますか？

サイトで視差効果を使用する場合は、適切な背景画像を選択することが重要です。背景が乱雑になったり、気が散ったりすることは望ましくありません。しかし一方で、それが退屈なサイドノートになることも望まないでしょう。

視差に適した種類の画像を選択するための5つの一般的なヒントを次に示します。

写真の邪魔にならないようにしてください。 あまりにも多くのことが起こっている画像は混乱を引き起こし、コンテンツから気をそらします。
写真がサイトのテーマと一致していることを確認してください。 あなたのサイトは物語を語っているはずです。この視差画像（他の画像と同様）は、テーマに適合している必要があります。
大きくてシンプルにしてください。 視差画像は小さい画面サイズでも表示されることを忘れないでください。写真の詳細が小さすぎて、小さいデバイスでは認識できないことを確認してください。
必要に応じてオーバーレイカラーを追加します。 良い視差画像には、暗い面と明るい面の両方があり、スクロールするとテキストが隠れてしまうことがあります。暗いオーバーレイまたは明るいオーバーレイを追加すると、テキストが画像のどこでも読めるようになります
面白くする。 退屈な何かに落ち着くためにそこに写真を撮る方法があります。あなたの聴衆を引き付け、彼らの注意を引くものを見つけるために時間をかけてください。

どのサイズの視差背景画像を使用する必要がありますか？

これは答えるのが少し難しいです。すべての視差画像に適合する1つのサイズはありません。実際、少なくともレスポンシブデザインが登場して以来、Webデザインのすべてに適合する1つのサイズはありません。しかし、私はあなたに確固たるルールを与えることができないかもしれませんが、Diviで適切なサイズの視差背景画像を選択するためのいくつかの一般的なガイドラインを提供することができます。

最も人気のある画面サイズは約1366×766なので、すべての背景視差画像が少なくともこのサイズであることを確認します。しかし、より大きなモニターの人気のために、私は1920×1080のようなより大きなサイズで行きます。これにより、ユーザーはより大きなデスクトップで高品質の画像を見ることができます。

1920×1080のサイズの画像を使用する場合の問題は、高さが1080pxの可視セクションが表示されることはめったにないことです。だから、あなたはそれらの画像の下部を隠したままで銀行に預けることができます。

視差の背景画像を正しく表示するための役立つヒント

ヘッダーとトップセクションの場合

画像が完全に表示され、見栄えがよいことを確認する最も簡単な方法は、全幅ヘッダーモジュールを使用することです。そうすれば、画面サイズに関係なく、背景画像は常に見栄えがします。ただし、全幅ヘッダーモジュールを使用して視差の背景画像を使用している場合は、モジュールの上部と下部にパディングを追加して、画像をより多く表示する必要がある場合があります。 VisualBuilderを使用してこれを行うことができます。ヘッダーモジュール設定に移動します。 [詳細設定]タブで、[メイン要素]テキストボックスに次のように入力します。

Padding: 250px 0 250px;

それはあなたを正しい方向に向かわせるはずです。

それでも十分な画像が表示されない場合は、画像の上部を切り抜いてから、もう一度アップロードすることをお勧めします。これは役立つかもしれません。

また、画像の下部に重要でないコンテンツがあり、上部に重要なコンテンツがある写真を選択するようにしてください。ヘッダーの場合、視差画像の上部700pxのみが表示されることを期待する必要があります。

レギュラー/ミドルセクション用

セクションがユーザーの中心の視点に達したときに全体像を把握できるように、コンテンツの周囲に十分なスペースを残して背景を十分に露出させてください。あなたの利点にパディングを使用してください。視差を使用する場合は、ユーザーを混乱させないでください。画像が何であるかを確認するためだけに上下にスクロールする必要があります。初めてそれらを見せたほうがいいです。

下部セクション/フッター用

CSSメソッドを使用している場合は、背景画像の下部がより多く表示されることが期待できます（スペースの量によって異なります）。写真の下部をトリミングして、これらのセクションの上部をもっと表示してみます。

True Parallaxメソッドを使用している場合は、ほとんどの場合、画像の上部が表示されるため、ヘッダーのように扱います。

これは、ページの上部、中央、下部にあるTrueParallaxの背景画像の例です。

このタイプの橋の画像は、横に焦点が合っていて、画像の下部が上部ほど重要ではないため、ユーザーにメッセージが失われることはありません。

これはCSSメソッドを使用した同じページです。背景画像が固定されてブラウザウィンドウに拡大されていることがよくわかります。ずっと背景に固定されている同じ画像のようにさえ見えます。

完璧な画像を検索し、必要なパディングを追加してトリミングした後も満足できない場合は、いつでもハッキングに頼ることができます。

視差画像ハック：カスタムCSSを使用した画像の位置の変更

視差の背景の位置を変更したい場合は、cssセレクター「.et_parallax_bg」を使用できます。これは、視差効果のために画像を配置するデフォルトのcssです。

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

デフォルトでは、css視差メソッドの背景位置プロパティは次のようになっています。「上部中央」に設定されています。ただし、背景画像の元の位置を変更したい場合は、background-positionプロパティ値を調整できます。

カスタムCSSを特定の画像に凝縮したままにし、視差の背景すべてに影響を与えたくない場合は、CSSでカスタマイズする必要のある背景を識別できるように、セクションにクラスを追加する必要があります。

[詳細設定]タブのセクション設定に移動し、「パラハック」と呼ばれるCSSクラスを入力します。
次に、[ページ設定]に移動し、[詳細設定]タブを選択します。

次に、[カスタムCSS]ボックスを使用して、次のカスタムCSSの例のいずれかを入力します。

CSSメソッドを使用している場合は、次のカスタムcssを追加することで、背景画像を垂直方向の中央に配置できます。

.parahacks .et_parallax_bg {
    Background-position: center center !important;
}

背景画像を下揃えにするには、次のカスタムcssを追加します。

.parahacks .et_parallax_bg {
    background-position: bottom center !important;
}

背景画像を特定のピクセル数だけ上に移動するには、次のカスタムcssを追加します。

.parahacks .et_parallax_bg {
    background-position: center -150px !important;
}

True Parallax方式を使用する場合は、下部に隠されている画像の余分な220px（ブラウザの高さに応じて多かれ少なかれ）を考慮する必要があります。背景画像をより垂直方向の中央に配置するには、次のように負のピクセル値を使用してbackground-positionプロパティを調整する必要があります。

.parahacks .et_parallax_bg {
    background-position: center -100px !important;
}

背景画像をより下に揃えるには、次のカスタムcssを追加します。

.parahacks .et_parallax_bg {
    background-position: center -220px !important;
}

TL; DR？これが要点のビデオ要約です

私たちのYoutubeチャンネルを購読する

最後に

このガイドが、視差がDiviでどのように機能するかを深く理解するのに役立つことを心から願っています。ありがたいことに、Diviは視差機能を提供する上でほとんどすべての面倒な作業を行います。 CSSメソッドとTrueParallaxメソッドはどちらも、箱から出してすぐにリアルな効果を生み出します。ただし、適切な画像を見つけて微調整し、サイトで機能するようにするのは私たちの責任です。頑張れ！私はあなたが素晴らしいものを作成するに違いない。

コメントであなたからの連絡を楽しみにしています。

乾杯！