Diviで視差背景画像遷移を使用したフルスクリーンレイアウトの作成

フルスクリーンセクションを含むWebページを作成することは、ブラウザーの幅と高さ全体にまたがるスムーズな遷移とクリーンなセクションレイアウトで、ユーザーエクスペリエンスを向上させるための優れた方法です。 通常、これは、製品またはサービスを一度に1つのセクションで紹介する場合に効果的であり、ユーザーはページを下にスクロールしながらそれぞれに簡単に焦点を合わせることができます。 このタイプのデザインは、コンテンツに語りかけ、美しいデザインのアクセントを提供する背景画像にも非常に適しています。 また、少しクリエイティブにしたい場合は、背景画像に視差機能を追加して、フルスクリーンセクション間をスクロールするときに非常にユニークなトランジションを作成できます。

このチュートリアルでは、視差の背景画像のトランジションをDiviのフルスクリーンページレイアウトに追加する方法を紹介します。 プロセスは単純であり、それを使用すると、いくつかの強力な結果を作成できます。

スニークピーク

一緒に構築するデザインのいくつかを見てください。

入門

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

このチュートリアルで必要なのは、Diviと、さまざまな製品画像や背景画像に使用する画像のコレクションだけです。 ジュースショップレイアウトパックの画像を使用しています。 このレイアウトパックを取り上げたブログ投稿の下部にあるこれらの画像を含むzipファイルをダウンロードできます。 「フル解像度の画像アセットをダウンロード」ボタンをクリックするだけです。

新しいページの準備

画像の準備ができたら。 新しいページを作成し、ページにタイトルを付けます。 次に、Divi Builderをデプロイし、「最初からビルド」を選択します。 次に、ボタンをクリックしてフロントエンドを構築します。

これで、ロールする準備ができました！

基本的な考え方

この概念の背後にある基本的な考え方は、それぞれが全幅ヘッダーモジュールを備えた複数の全幅セクションを積み重ねることを含みます。 各ヘッダーモジュールには、セクションの背景を公開しながら、左、中央、または右に配置できるカスタム幅が与えられます。 次に、各セクションに特定の視差法を使用した背景画像を表示します。 これにより、ページを下にスクロールすると、さまざまな背景画像の遷移効果が作成されます。

これがそれを行う方法です。

全幅ヘッダーセクションの作成

まず、新しい全幅セクションを作成してから、全幅ヘッダーモジュールをセクションに追加する必要があります。

次のコンテンツで全幅ヘッダー設定を更新します。

タイトル：「トマトジュース」
ボタン＃1リンクテキスト：「レシピを見る」
コンテンツ：「あなたのコンテンツはここにあります。 このテキストをインラインで、またはモジュールのコンテンツ設定で編集または削除してください。」
ロゴ画像：[スクリーンショットを参照]（画像は240px x 300px）

次に、ヘッダーデザインを次のように更新し続けます。

背景色：rgba（255,255,255,0.92）

フルスクリーンにする：はい

下スクロールボタンを表示：はい
アイコン：スクリーンショットを参照
下にスクロールアイコンの色：＃222222

テキストの色：暗い

タイトル見出しレベル：H2
タイトルフォント：Raleway
タイトルテキストサイズ：50px

ボディフォント：ラト
本文サイズ：16px
本文の文字間隔：1px

ボタン1のテキストサイズ：16px
ボタンfOneテキストの色：#ffffff
ボタン1の背景色：＃222222
ボタンワンボーダー半径：50px
ボタン1文字の間隔：2px
ボタン1フォントスタイル：TT

幅：45％（デスクトップ）、60％（タブレット）、100％（スマートフォン）

設定を保存する。

ここでの主な主要なデザイン要素は、「フルスクリーンにする」オプションと「幅：45％」です。 これにより、セクションは常にブラウザウィンドウの幅と高さ全体に広がることができます。 また、カスタム幅はヘッダーモジュールを縮小して、次に追加するセクションの背景を公開します。

セクションの背景を追加する

ヘッダーモジュールが設計されたので、セクションの背景画像を追加できます。 全幅セクションの設定に移動し、背景画像を追加します。 ブラウザウィンドウの幅と高さ全体にまたがるのに十分な大きさであることを確認してください。 次に、CSS視差法を使用することを選択します。

セクションの複製

各セクションには新しいコンテンツが表示されるため、全幅セクションを3回複製して、ページにヘッダーモジュールを備えた合計4つのセクションを作成する必要があります。

CSS視差で同じセクションの背景画像を使用して静的な背景画像を作成する

4つの同一のセクションができたので、デザインをよりよく理解するために、全幅のヘッダーコンテンツを新しいロゴ画像とタイトルで更新できます。 ただし、4つのセクションすべてにCSS視差を使用して同じ背景画像を保持すると、結果は静的な背景画像になり、異なるフルスクリーンセクションにスクロールしてもその場所に留まります。 また、各ヘッダーで下にスクロールボタンを使用しているため、ユーザーは矢印をクリックして新しい各セクションにきれいにスクロールすることができます。

結果を確認してください。

CSS視差遷移で異なる背景画像を使用する

セクションごとに異なる背景画像（CSS視差あり）を使用すると、スクロールしたときのデザインの感触が変わります。 4つのセクションの背景画像に対してCSS視差がすでに有効になっているため、必要なのは各画像を別の画像に変更することだけです。 この場合、各セクションの背景画像として製品の大きなバージョンを追加するだけです。

4つのセクションごとに異なる背景画像（CSS視差を使用）を作成したら、結果を確認します。

真の視差遷移を伴うさまざまな背景画像の使用

背景画像の遷移効果を変更したい場合は、4つのセクションの背景画像すべての視差メソッドをCSSからTrue視差に変更できます。

セクション設定の1つを開き、CSSメソッドを「TrueParallax」に変更します。

次に、残りの3つのセクションについても同じことを行う必要があります。 または、[視差方法]オプションを右クリックして、[視差方法を拡張]を選択し、ページ全体のすべての全幅ヘッダーモジュールに適用することもできます。

完了したら、背景画像の遷移効果を確認します。

さまざまなモジュールの配置を調べる

全幅ヘッダーモジュールの配置を変更するのは簡単です。 全幅ヘッダーモジュールのカスタム幅は45％であるため、モジュールの配置を左、中央、または右に簡単に調整して、別のレイアウトを取得できます。 私は特に、静的な背景を持つ中央揃えが好きです。

モジュールを中央に配置するには、全幅ヘッダー設定を開き、モジュールの配置を中央に更新します。

モジュールをページの右側に配置するには、モジュールの配置を右揃えに更新するだけです。

アラインメントが決まったら、「モジュールアラインメント」スタイルをページ全体の残りのヘッダーモジュールに拡張するだけです。

これは、静的な背景（CSS視差のあるそれぞれに同じ背景画像）を使用した中央揃えの例です。

これは、CSS視差法を使用したさまざまな背景画像の中央揃えの例です。

これは、TrueParallaxメソッドを使用したさまざまな背景画像の中央揃えの例です。

これは、cssと真の視差の組み合わせを使用したさまざまな背景画像との右揃えの例です。

最終的な考え

これらの背景画像のトランジションは、フルスクリーンセクションおよびカスタマイズされたヘッダーモジュールと組み合わせて使用​​すると、非常に見栄えがします。 機能性はすっきりしていて、デザインは繊細でユニークです。 どちらかといえば、コンテンツの静的な背景をすばやく簡単に作成する方法です。 背景のグラデーション、フォント、画像を使用して、より高度なデザインを自由に探索してください。

コメントでお返事をお待ちしております。

乾杯！